SSR react app with Express.js and Next.js

Tram Ho

We have to assert that React is a great choice for building high quality web apps. However, things get more complicated, you need to learn about client-side routing, page layout … At some point you will need your page to load faster, so things will get complicated. than.

Next.js and a popular JavaScript framework that runs both on the browser client and on the server. It provides developers with an easy way to get started and it uses the React template, which is also a simple way for React developers to get effective next learning quickly.

One of its strengths is its excellent server-side rendering, and it integrates well with Express.

What is server side rendering?

Server side rendering is the usual method of putting your html on the screen. This refers to using a server to submit your html to the browser

So why is it troubling if it’s the conventional method that’s been around for so long?

Remember the introduction of the MVC concept caused some concern. Essentially, there was some disagreement that ultimately led to the proliferation of Javascript frameworks for rendering views.

So what does this have to do with?

Before long, a problem emerged: javascript frameworks only rendering one type of div in the browser, using DOM manipulation to do its work around the browser. This means users have to wait longer to see anything. It can also affect SEO if a crawler is unable to quickly see the content of a page.

One solution is to display the Javascript files from the server side before returning them the output from the server.

Get started with Next

Getting started is very simple. All we need to do is create a new directory, start a new project node, install Next and the React DOM.

Next, open the package.json file and replace it with the following:

Run the command npm run dev , you will get an error like:

This is because Next uses the pages directory and the files in it to establish routes. This means if we have a file called index.js in our main page directory, Next will try to use the components in it just like the entry point. Let’s create the pages folder and the index.js file

Next, add the code to pages/index.js :


Share the news now

Source : Viblo