1

So I get the difference between next build && next export and next build && next start from here.

In short, next build && next export generates a fully static app which does not require a server to host, whereas next build && next start starts a server which renders and serves content.

My question is then, how is next build && next export different from just using React? Seems both approaches generate static files (html, css, js). If I want to optimize SEO, is next export better than using react?

user16401944
  • 49
  • 7

3 Answers3

4

There are many ways to create a React web app. And there are many types of them as well.

Client-Side Rendering

Noticeable toolchain: Create React App

Everything is done on the client side. You send a blank HTML file and various JS bundles to the browser. And the browser parses the bundle and renders contents on the HTML and presents it to the users.

It takes less effort to set up so it best suits small projects.

This is properly what you were referring to when you said: "just using React".

Server-Side Rendering

Noticeable Toolchain: Next.js

Most of the works is done on the server-side. When a user requests to view a page, the server generates the need HTML file dynamically with static contents in it. Then, it sends the file to the user together with JS bundles for interactive content. The browser then attaches those JS to the HTML and present it to the users.

It requires far more effort to set up compared to Create React App. It best suits mid to large projects.

Static Site Generator (Prerender) Noticeable Toolchain: Gatsby

Similar to Next.js, but instead of generating the HTML dynamically. It generates ALL OF THEM at build time and just sends it to users upon being requested.

This property has the best performance overall. But it can become a nightmare when the site is growing bigger and have hundreds of pages. Building a large, static Gatsby site takes ages to complete.

p.s. Next.js is also capable of generating static sites, but why don't you pick the right tool which is designed and optimized for generating a static site in the first place?

Matthew Kwong
  • 2,548
  • 2
  • 11
  • 22
  • 1
    Thanks for the answer. I just learned that react actually sends an empty HTML to the browser along with whole bunch of scripts, while next export sends HTML with contents already in it. This solves my question. Thanks! – user16401944 Oct 22 '21 at 09:05
  • 2
    Correction: Not `React`, it is just how `create-react-app` does stuff. React itself has APIs for server-side rendering, it is just a matter of fact that `create-react-app` decided not to use it while `next` do. – Matthew Kwong Oct 22 '21 at 09:16
1

Answering my own question after I tried the following:

  • Launch a create-next-app then do next build && next export
  • Launch a create-react-app then do yarn build
  • Compare out/index.html in the next app and build/index.html in the react app

I found out that out/index.html actually contains all the static contents, whereas build/index.html contains nothing but <script> elements in its <body>. Everything including paragraphs (<p> elements) are later generated (or hydrated) when opened in the browser.

So in conclusion, even though both Next and React can be used to generate static site (SSG), Next is still better for SEO purposes since the contents are already in the html file.

user16401944
  • 49
  • 7
0

Next.js can be used as static side builder (in the case you are referencing) which means it will generate all of you html at the time of build and along provide some performance features.

React(if not used on server) will always just have 1 HTML page which then loads of all your App(or chunks if you are code splitting) when the client requests it.

If you are not familiar about the concept read more on Static side building.

For SEO purposes using Next.js with either static or server side rendering would be the best approach since everything is prebuilt and easily accessible by robots(Although Google bot should already read javascript apps as well).

Mario Nikolaus
  • 2,346
  • 1
  • 21
  • 28