Skip to main content

Posts

Showing posts with the label Full-stack development

React Ecosystem: Static Generation with Next.js and React

In the previous post , We created a BlogPost application rendering content on server-side with Next.js . We will be changing the same application to use SSG (Static Generation) capability of Next.js. What will we create and which Next.js functions will we use? We will create an application which will have index page to list all the available blog links and statically generated blog posts. We will use getStaticProps and getStaticPaths functions from Next.js. getStaticProps function is called by Next.js at build time and pre-renders the page. getStaticPaths function is also called by Next.js at build time. If you are using getStaticProps and there are dynamic paths then you define those in getStaticPaths Update index.tsx import React from 'react'; import { GetStaticProps, GetStaticPropsContext } from 'next'; import BloggerService from '../service/BloggerService'; import styles from '../App.module.css' /* Line 1*/ interface IndexPageProps { bl

React Ecosystem: Server-side rendering with Next.js

In the previous post , we created a BlogPost application with React and Redux and managed global state with Redux. We will extend the same application and will introduce Next.js for server-side rendering. The bigger benefit of using Next.js is pre-rendering of the page along with automatic code-splitting, static site export, CSS-in-JS. Next.js functions Next.js exposes three functions for data fetching and these are getStaticProps , getStaticPaths and getServerSideProps . First two functions are used for Static generation and the last function getServerSideProps is used for Server-side rendering. Static generation means the HTML is generated at the build(project build) time whereas in Server-side rendering HTML is generated at each request. Adding required libraries Run npm i --save next @types/next from root of the project to add the required libraries for this example. Update following commands under scripts in package.json. "dev": "next dev", "star

React Ecosystem : Building your first React application

Introduction React was first introducted to general public in May 2013; roughly three years after the first release of Angular JS (October 2010). Soon, it picked up the momentum and now is the highest stared(~150K) and forked(29.2K) repository on Github. The positive point of React with its contemporary libraries was the backward compatibility in all the released versions. It started as a class based library (extending React.Component ) to pure functional library with React Hooks ; still keeping backward compatibility. Now, new features include asyncronous rendering with Suspense . React's ecosystem is very vast with lots of frameworks available to choose from. We will start with building first simple a.ka. Welcome react application and then build full-stack application with React, Redux, reselect, Next.JS, express JS and Node.JS. So, stay tuned :) Building your first React application You can create React application with project like create-react-app or can create custom