DEV Community

Cover image for NextJS Client-side, Server-side & Static Rendering
Sean Saranga Amarasinghe
Sean Saranga Amarasinghe

Posted on

1 1

NextJS Client-side, Server-side & Static Rendering

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

Read more here

Heroku

Built for developers, by developers.

Whether you're building a simple prototype or a business-critical product, Heroku's fully-managed platform gives you the simplest path to delivering apps quickly — using the tools and languages you already love!

Learn More

Top comments (0)

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay