React Server Side Rendering with Next.js

What’s the difference between client and server-side rendering?

Ruby on Rails and PHP are the most commonly used languages for server-side rendering. React can do both client-side and server-side rendering.

How does server-side rendering work?

The most common use for server-side rendering is to handle the initial request to load the page CSS, JavaScript, and contents when a user or bot make a request to your application.

The initial page load is faster without the white page having to wait for the browser to download the JavaScript. Most importantly, it’s SEO friendly with all the search engines (Google, Bing, Baidu, DuckDuckGo, Internet Archive, Yandex).

How does client-side rendering work?

With client-side rendering, the server will handle the initial request to load the page CSS and JavaScript. The JavaScript will make another request to generate the appropriate content (HTML) in the browser. Content can be easily updated without loading the entire page for better user experience.

React Server-Side Rendering

Server-side rendering with React increases the complexity of an application. React components need to run on Node and require two routers (client-side, server-side). APIs request behaves differently when it runs on the server.

Next.js is awesome!

Next.js is a minimalistic framework for server-side rendered Universal JavaScript application with React, Webpack, and Babel (execute JavaScript on both the client and the server).

I have worked with other solutions for React Server-Side rendering. Next.js is the easiest to learn and deploy a Universal JavaScript Application.

You can have an application running as quickly as possible with create-next-app.  The most important features are automatic code splitting and automatic server rendering.

Learn how to build a Universal Javascript apps with Next.js at and Next.js examples.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s