The future of SEO and search ranking algorithms are now in heavy favour of static or server-side rendering. This means building static or server-side rendered apps instantly gain advantages in rankings.
In this article, we are going to discuss building static & server-side rendering with NextJS, a server-side rendering React framework.
What is Static Rendering & Server-Side Rendering
Server-Rendering (SSR)
In response to each request, renders the app on the Server , and then sends the rendered HTML and Javascript back to the client.
Client-Side Rendering (CSR)
Renders the app in the browser on the client at run time.
Static Rendering (SR)
Usually generating a static HTML page for every URL. Pre-built app, or renders the app at build time (e.g. when you run the npm run build or yarn build command). This is the default approach of NextJS.
NextJS
In NextJS, there are three main functions that are used for SSR and SR, and a hook that for client-side data fetching.
Built time:
getStaticProps — fetches data at build time getStaticPaths — pre-render dynamic routes at build time
Run time:
getServerSideProps — fetches data on each request SWR — fetches data on the client-side at run time
Server-Side Rendering (SSR)
The HTML is generated on the server on each request for the page — the HTML is 'dynamic' rather than 'static' as it will depend on the data required.
Each time a client requests the page, the server will fetch the data for that page, and generate the page's HTML using the data.
Next.js offers two data fetching methods for SSR — getServerSideProps and getInitialProp
Top comments (0)