What is Static Site Generation? How Next.js Uses SSG for Dynamic Web Apps

What is Static Site Generation? How Next.js Uses SSG for Dynamic Web Apps

What is static generation and how does Next.js use it to build dynamic web apps? What is static generation * What happens when you build a Next.js app * How can you statically export a Next.js app * How you can deploy those static files to Netlify

What is static generation and how does Next.js use it to build dynamic web apps? We'll walk through:

  • What is static generation
  • What happens when you build a Next.js app
  • How can you statically export a Next.js app
  • How you can deploy those static files to Netlify

Static websites are as old as the web itself, but the rise of JavaScript has opened the door to make those static sites more dynamic. While that can include building an HTML file by hand, how can we leverage static generation to build apps with modern tools?

  • What is Static Generation?
  • What happens during Static Generation?
  • How does Next.js use Static Generation?
  • Statically generating an app with Next.js

What is Static Generation?

Static Generation describes the process of compiling and rendering a website or app at build time. The output is a bunch of static files, including the HTML file itself and assets like JavaScript and CSS.

If you haven’t heard of Static Generation but that concept sounds familiar, you might have heard of it by its longer name Static Site Generation or its acronym SSG.

What happens during Static Generation?

JavaScript-based web apps as we traditionally know them work by running libraries like React or scripts at run time in the browser.

When the browser receives the page, it’s usually simple HTML without a lot of content. This then loads the scripts to pull the content into the page, a process also known as hydration.

With Static Generation, tools like Next.js try to render that page mostly like it would in the browser but at compile time. This gives us the ability to serve the entire content on first load. The scripts still hydrate the page during this process, but ideally with fewer changes or no changes at all.

How does Next.js use Static Generation?

Out of the box, Next.js will attempt to statically generate any pages that it can. It does this by detecting how an app is fetching its data.

Next.js provides a few different APIs to fetch data including getStaticProps and getServerSideProps, which, depending on how they’re used, determines how Next.js will build your app.

If you only use getStaticProps to fetch data, Next.js will fetch that data at build time, leaving you with a completely static page.

If you use getServerSideProps, Next.js will know that the app requires a server to render those pages.

Alongside a deployment solution like Vercel that will automatically handle configuring a server, Next.js will load any of the data when someone requests the page from the server.

While it doesn’t do it by default, Next.js also provides the ability to export the app into static files into a separate directory after the app has been built.

First, you would run the next build command to build the app, then you would run next export which, by default, makes the app available as static files in the out directory.

How to statically generate an app with Next.js

To get an idea of how this works, we can quickly create a new Next.js app.

The only requirements for this is that you have Node installed with npm and the ability to use a terminal to run commands.

How to create a Next.js app

Getting started is as simple as running a single line in the terminal.

Open up the directory you’d like to create your project in and run:

npx create-next-app my-static-nextjs-app

After the installation is complete, you can navigate to your new project directory:

cd my-static-nextjs-app

Once there, start your development server:

npm run dev

And once the server is ready, you can open up http://localhost:3000 in your browser where you can now see your new Next.js app!

New Next.js app

How to build a Next.js app

Now that we have our application available, let’s try to build it.

In the same directory, run the command:

npm run build

If you look at the output inside of the terminal, we see a few important things happen.

First, Next.js lets us know that it’s running through its build process, including optimizing the app for performance, compiling the app, and collecting data.

Building with Next.js

Next, we see that Next.js shows us a breakdown of how it’s built each page.

The default Next.js starting template includes a few static pages and an example API route.

Using the legend at the bottom, we can see that all of the pages and assets were statically generated with one route tagged as requiring a server, which would be our API route.

Next.js generating pages

Note: For the purposes of this walkthrough, we can ignore the API route, but Next.js along with Vercel provides the ability to build lambda functions as part of the Next.js API.

🗒️ Original Post: https://www.freecodecamp.org/news/static-site-generation-with-nextjs/

next react javascript web-development developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Next.js vs. React: The Developer Experience

The developer experience for Next.js vs. React is similar in some ways and drastically different in others. In the world of React, Next.js has become a popular framework for “hitting the ground running.” Next.js builds on top of React to provide a streamlined development experience. There is definitely a different experience when building a project with Next.js vs. React.

Tendencias Javascript y Web 2020. React, Next.js, Deno

Tendencias Javascript y Web 2020. React, Next.js, Deno. En este video te voy a mencionar algunas herramientas y frameworks que fueron, seguirán siendo o van a ser tendencia en este 2020. Entre ellas están React, Next.js, Deno, los Headless CMS como Strapi, entre otros.

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...

Hire Dedicated React Native Developer in India | React Native Development

Hire dedicated React Native developers for your next project. As the top react native development company we offer you the best service as per your business needs.