What you need to know before you dive into Next.js: React, Pre-rendering, CDN and Client-side navigation

React

React consists of three main packages: react, react-dom, and babel.

• react has the core part of the library.
• react-dom enables you to react use react with the DOM.
• babel compiles jsx syntax so that it can be readable by javascript.

Why React?

• If you create UIs in pure javascript it’d be completely imperative. You’re bound to describe how you do it. Yet, react enables you to create UIs in a declarative way. You only need to focus on what you meant to create instead. There are just fewer details and you’ll write less code.

State in React

• The UI DOM is the blueprint of the UIs.

When does react preserve or reset state?

• React preserves state when the same components are at the same position in the tree. We can reset state by rendering components in different positions or by giving each component a unique key.
• What if we want to retain state instead of resetting it? (chat app)
  • Render all components and hide them using css
  • Lift up state to parent component
  • Store it in localStorage to make it last when the user closes the page
• React resets state when different components are at the same position in the tree.

Single Page Application

• A web app that has only one document and updates its content via javascript APIs.
• Since it doesn’t need to receive extra documents from the server, page loading is fast.

Tips from challenges

• In React DOM, Javascript objects can be children.
• Keys are used as part of the position. If there is a child of the same kind of component and the key changes, react resets state.
• Keys are used to find the correct state matching the child. If the order within the parent changes, react links each state to the right child with keys.
• A component is recreated from scratch if its key changes. React also recreates the DOM elements instead of reusing them.

The environment: development and production

• You’re building and running your application on your local machine during development.
• You’re making your application ready to be deployed and consumed by users and you can say it’s going to production.

There are four steps of production: Compiling, Minifying, Bundling, and code splitting.

• Compiling transforms code in a way that browsers can understand.
• Minifying gets rid of unnecessary information for code to run such as comments, spaces, and indents. This process enhances performance by decreasing file sizes.
• The application consists of a bunch of modules components and functions for better developer experiences. Bundling draws dependency graph and merges them into fewer files. The number of requests for files reduces.
• Code splitting splits a bundle into multiple bundles and loads them when they are actually needed. It reduces initial page loading time.

Code execution phase: build time and run time

• build time: a set of steps toward production
• run time: the time when your application runs to respond to a user’s request

Rendering: client and server

• client: the browser that sends a request to a server
• server: the computer in a data center that takes a user request, processes it, and sends it back to the user as a form of response.

Rendering

• the process of converting React code into HTML.
• When the web application is rendered before it is sent to the browser, it's called pre-rendering. There are two pre-rendering techniques that Next.js introduces: SSR(Server Side Rendering) and SSG(Static Site Generation).
• SSR(Server Side Rendering): The server generates HTML and sends it to the user every time it takes a request.
• SSG(Static Site Generation): The server creates HTML at build time and sends it to the user.(You can update the HTML even after build time.)
• CSR(Client Side Rendering): The browser translates react app into HTML.
• Hydration: the process that makes HTML pages interactive using javascript.

Network

• A set of computers linked to one another that can send and receive data among them.
• CDN: Set computers in multiple locations and the computers store static files. These computers send the cashed result.
• Edge computing: The same as CDN but these computers support code execution.
• These networks can make applications deliver content faster, reduce latency, and more performant.

Client-side navigation

• Client-side navigation is the page transition using javascript.
• The default page transition done by the browser loads the full page from scratch while client-side navigation only modifies the part of the page.
• Therefore, client-side navigation is more efficient than default browser navigation.