TIL - Next.js - Getting Started

I finally got started on reading the Next.js documentation website, specifically the Learn Next.js section. I found it to be really well written, giving me a great review on JavaScript to React, and from React to Next.js.

React = library; Next.js = framework

• React is a library - provides useful functions to build UI but leaves it up to the developer where to use those functions
• Next.js is a framework - provides additional tooling, configuration, and structure for the app

Basic DOM

• You visit a web page -> make a request to the server -> server returns an HTML file to the browser
• Browser receives the HTML and constructs the Document Object Model(DOM) - object representation
• Using JavaScript you can manipulate the DOM by adding, editing, or deleting components/elements.

React State

• state is initiated and stored within a component.
• You can pass state information to children components as props but the logic for managing and updating the state should be within the component where state is initially created

From Development to Production

• For an app to be production ready - the application needs to be compiled, bundled, minified, and code split.

Compiling

• What: Code in one language -> ouptut to another language (or another version of that language)
• Next.js has compiler written in Rust
• Why: Developers use developer-friendly code such as JSX and TypeScript - however, browsers cannot naturally read these languages
• So: So prior to production the code needs to be COMPILED into JavaScript
• When: During development stage when you edit code && part of build step

Minifying

• What: Removing unnecessary code formatting & comments
• Why: Developers write code that is good for human readability (e.g. comments, spaces, indents, multiple lines)
• When: Prior to production, the code is simplified, minified (since this formatting is for the benefit of humans’ eyes only)

Bundling

• What: Resolving the web of dependencies by merging files (or packaging the modules) into optimized, simplified budnles for the browser.
• Why: During development, developers break up their application into separate files, modules, components, and functions & also external third-party packages -> results in lots of dependencies
• When: during production stage

Code splitting

• What: Process of splitting application’s bundle into smaller chunks required by each entry point (URL).
• Why: Developers uually split their applications into multiple pages (e.g. different URLs/routes). This results in different entry points into the application.
• Result: application’s initial load time is improved -> only loading the required code for THAT page.
• Next.js: Each file inside pages/ directory will be automatically code split into own JavaScript bundle

Build time and runtime

• Build time == build step == series of steps that prepare your app for production.
• Runtime == request time == period of time when your application runs in response to a user’s request (after app has been bulit and deployed)

Three types of Next.js Rendering

1. Server-side Rendering
2. Static site generation
3. Client-side rendering

Pre-rendering == server-side and static site generation

• Fetching of external data and transformation of React components into HTML happens BEFORE result is sent to client
• Next.js pre-renders every page by default
• HTML generated in advance on a server -> sent to client-side

Server-side rendering:

• For each request: HTML of the page is generated on a server - generated HTML, along with JSON data, and JS instructions to make page interactive sent to the client
• Hydration: fast non-interactive page is shown via HTML, and React uses JSON data & JS to make components interactive
• Next.js: getServerSideProps

Static Site Generation:

• HTML generated on server - and there is no server at runtime.
• Content generated once during build time. When app is deployed, the HTML is stored in CDN and re-used for each request.
• Next.js: getStaticProps

Client-side rendering:

• Standard React app: browser receives empty HTML shell and JS instructions on how to construct UI
• Initial rendering work happens on the user’s device.

Where is the application code distributed to post-deployment?

1. Origin servers
2. Content Delivery Network (CDN)
3. The Edge

Origin servers

• Aka, the main computer or the server that stores the original version of the application code
• Upon receiving a request, origin server does computation prior to responding -> result of this computation can be moved to CDN.

Content Delivery Network

• Stores static content in multiple locations around the world and placed between client and origin server
• Upon new request - the closest CDN location to the user responds with cached result
• Using the cached result is more time and energy efficient because computation work does not need to happen for every request.

The Edge

• Fringe of the network (edge) == closest to the user
• Distributed to multiple locations around the world (like CDNs) - but they run small snippets of code.
• Caching & code execution is possible at the Edge -> so part of the user’s request doesn’t have to go all the way back to the initial server.