Lattice

Question 1

CSR

Answer 1

Client-Side Rendering

Question 2

SSR

Answer 2

Server-Side Rendering

Question 3

SSG

Answer 3

Static-Site Generation

Question 4

What is Next js?

Answer 4

Next.js is a React framework that gives you building blocks like routing, data fetching, to create web applications

Question 5

What is the difference between props and state?

Answer 5

Props is read-only information that’s passed to components. State is information that can change over time, usually triggered by user interaction

Question 6

What is the difference between compiling and bundling in web development?

Answer 6

Compiling is transforming code into something parsable by browsers. Bundling is resolving your applications dependency graph and reducing the number of files

Question 7

What is code-splitting?

Answer 7

the process of splitting the application’s bundle into smaller chunks required by each entry point. The goal is to improve the application’s initial load time by only loading the code required to run that page.

Question 8

React server components

Answer 8

Server components are completely rendered on the server and do not require client-side JavaScript to render. In addition, server components allow developers to keep some logic on the server and only send the result of that logic to the client. This reduces the bundle size sent to the client and improves client-side rendering performance

Question 9

SSR

Answer 9

the HTML of the page is generated on a server for each request. The generated HTML, JSON data, and JavaScript instructions to make the page interactive are then sent to the client. Which then makes the content interactive in a process called hydration

Question 10

SSG

Answer 10

the HTML is generated on the server, but unlike server-side rendering, there is no server at runtime. Instead, content is generated once, at build time, when the application is deployed, and the HTML is stored in a CDN and re-used for each request.

Question 11

What do CDN’s do?

Answer 11

store static content (such as HTML and image files) in multiple locations around the world and are placed between the client and the origin server. When a new request comes in, the closest CDN location to the user can respond with the cached result.

Question 12

How do CDN’s increase performance?

Answer 12

they reduce the load on the origin because the computation doesn’t have to happen on each request. It also makes it faster for the user because the response comes from a location geographically closer to them.

Question 13

The Edge

Answer 13

Edge servers are distributed to multiple locations around the world. But unlike CDNs, which store static content, some Edge servers can run code.

This means both caching and code execution can be done at the Edge closer to the user.

Question 14

What does next js give us?

Answer 14

• page-based routing system
• page-based pre-rendering (SSR and SSG)
• code splitting
• sass, CSS in js support
• fast refresh
• API routes
• pre-fetching

Question 15

how do you do client-side navigation with next js?

Answer 15

<a>homepage</a>

import Link from ‘next/link’;

Question 16

how does prefetching with Next js work?

Answer 16

whenever Link components appear in the browser’s viewport, Next.js automatically prefetches the code for the linked page in the background. (in production)

Question 17

how do you create routes in next js?

Answer 17

by adding files under the ‘pages’ directory.

Question 18

What benefits does the Next js Image component have?

Answer 18

• Ensuring your image is responsive on different screen sizes
• Optimizing your images with a third-party tool or library
• Only loading images when they enter the viewport

Question 19

What benefits does the Next js Script component have?

Answer 19

optimizes when scripts are fetched and executed

- strategy controls when the third-party script should load

Question 20

what styling methods does Next js have built-in support for?

Answer 20

CSS Modules, Sass, styled-jsx

Question 21

where are global styles added in Next js?

Answer 21

in pages/_app.js only, they can not be imported in other files

Question 22

what is kept in pages/_app.js?

Answer 22

is the top-level component which will be common across all the different pages. You can use this App component to keep state when navigating between pages, for example.

Question 23

What question can you ask to determine if you should use SSG?

Answer 23

Can I pre-render this page ahead of a user’s request?

Question 24

When should you not use SSG?

Answer 24

if you cannot pre-render a page ahead of a user’s request. Maybe your page shows frequently updated data, and the page content changes on every request.

Question 25

When would you use Server-side rendering?

Answer 25

When the data needs to be up-to-date with every request

Question 26

how do you use SSG with Data?

Answer 26

when you export a page component, you can also export an async function called getStaticProps

• getStaticProps runs at build time in production, and…
• Inside the function, you can fetch external data and send it as props to the page.

Question 27

Where does getStaticProps run and work?

Answer 27

only runs on the server-side. It will never run on the client-side. It won’t even be included in the JS bundle for the browser. That means you can write code such as direct database queries

Question 28

What is a side effect of getStaticProps only being run at build time?

Answer 28

you won’t be able to use data that’s only available during request time, such as query parameters or HTTP headers

Question 29

Where can you use getStaticProps?

Answer 29

only in a page

Question 30

how do you use SSR with Data?

Answer 30

you need to export getServerSideProps from a page

Because getServerSideProps is called at request time, its parameter (context) contains request-specific parameters.

Question 31

When should you use SSR? Why?

Answer 31

only if you need to pre-render a page whose data must be fetched at request time. Time to first byte (TTFB) will be slower than getStaticProps because the server must compute the result on every request, and the result cannot be cached by a CDN without extra configuration.

Question 32

Client-side Rendering

Answer 32

Statically generate (pre-render) parts of the page that do not require external data.
When the page loads, fetch external data from the client using JavaScript and populate the remaining parts.

Question 33

When is CSR useful?

Answer 33

for user dashboard pages, for example. Because a dashboard is a private, user-specific page, SEO is not relevant, and the page doesn’t need to be pre-rendered. The data is frequently updated, which requires request-time data fetching.

Question 34

how do we create a dynamic route in Next js?

Answer 34

in the pages directory files that begin with [ and end in ] are dynamic. [id].js
1. Create the file and component
2 export a getStaticPaths function which returns an array of possible values for the [..]
3. export a getStaticPros which fetches necessary data for the dynamic content

Question 35

How does params.id from getStaticProps({ params }) know the key is named id?

Answer 35

The value from the file name

Question 36

How does params.id from getStaticProps({ params }) know the key is named id?

Answer 36

The value from the file name

Question 37

what happens if we return fallback: false from getStaticPaths?

Answer 37

then any paths not returned by getStaticPaths will result in a 404 page.

Question 38

what happens if we return fallback: true from getStaticPaths?

Answer 38

1. The paths returned from getStaticPaths will be rendered to HTML at build time.
2. The paths that have not been generated at build time will not result in a 404 page. Instead, Next.js will serve a “fallback” version of the page on the first request to such a path.
3. In the background, Next.js will statically generate the requested path. Subsequent requests to the same path will serve the generated page, just like other pages pre-rendered at build time.

Question 39

what happens if we return fallback: ‘blocking’ from getStaticPaths?

Answer 39

then new paths will be server-side rendered with getStaticProps, and cached for future requests so it only happens once per path

Question 40

how do you create a catch-all route?

Answer 40

by adding three dots inside the brackets

pages/posts/[...id].js matches /posts/a, but also /posts/a/b, /posts/a/b/c

Question 41

how do you need to change getStaticPaths when creating a catch-all route?

Answer 41

you must return an array as the value of the id key like so:

return [
  {
    params: {
      // Statically Generates /posts/a/b/c
      id: ['a', 'b', 'c'],
    },
  },
  //...
];

export async function getStaticProps({ params }) {
  // params.id will be like ['a', 'b', 'c']
}

Question 42

how can you create a 404 page?

Answer 42

create a pages/404.js file

Question 43

What are some good use case for an API Route?

Answer 43

Saving incoming data to your database
Securely communicating with a third-party API
Previewing draft content from your CMS

Question 44

in what was are API routes secure?

Answer 44

API Route code will not be part of your client bundle, so you can safely write server-side code

Question 45

event.target

Answer 45

whatever element somebody actually clicked on. It can vary, as this can be within an element that the event was bound to.

Question 46

event.currentTarget

Answer 46

is the element you actually bound the event to. This will never change.