NextJS

Question 1

What are the 3 base components of web development?

Answer 1

HTML, CSS, Javascript

Question 2

How is the DOM represented?

Answer 2

Javascript representation of HTML

Question 3

Who keeps the DOM and HTML in sync?

Answer 3

The browser

Question 4

What is the virtual DOM?

Answer 4

a javascript representation of the DOM created by React to allow for faster updates

Question 5

Explain imperative programming vs declarative programming using an example

Answer 5

Imperative is like giving recipe instructions to someone to make a pizza.

Declarative is like ordering a pizza without being concerned how its made.

Question 6

is React a declarative or imperative library?

Answer 6

declarative

Question 7

What’s an example of a JS compiler?

Answer 7

Babel

Question 8

Why do you need to compile your React code?

Answer 8

React uses JSX which needs to be compiled into JavaScript.

Question 9

What is a component?

Answer 9

React’s tool for UI blocks.

Question 10

What do components return?

Answer 10

JSX

Question 11

What is SSR?

Answer 11

Server Side Rendering: the HTML of the page is generated on the server at request time

Question 12

What is SSG?

Answer 12

Static Site Generation: the page is generated on the server, at build time, and stored in a CDN.

Question 13

What function should you export if you want to generate HTML on the server at request time?

Answer 13

getSeverSideProps()

Question 14

What function should you export if you want to generate HTML on the server at build time?

Answer 14

getStaticProps()

Question 15

When should you use getServerSideProps()?

Answer 15

When you want data to be fetched at request time

Question 16

When should you use getStaticProps()?

Answer 16

When the page’s data is available before request time. ie very good for SEO

Question 17

Name 3 ways to serve your app:

Answer 17

Origin server, CDN, Edge

Question 18

What’s the command to create a new nextJS app?

Answer 18

npx create-next-app

Question 19

Whats the common command to run the app?

Answer 19

npm run dev

Question 20

What does CSS Modules automatically generate?

Answer 20

unique class names

Question 21

What does CSS Modules allow us to do?

Answer 21

CSS Modules allow us to scope styles to components

Question 22

Whats the name of the file to create global CSS?

Answer 22

_app.js

Question 23

How would you apply a style globally?

Answer 23

• Create a layout component
• Create a global.css file and make updates there
• Import global.css to layout

Question 24

Where can you import global CSS files?

Answer 24

Only inside pages/_app.js

Question 25

Define hydration

Answer 25

When a page is loaded by the browser and the JS runs

Question 26

Which function do we call to say this:

“Hey, this page has some data dependencies — so when you pre-render this page at build time, make sure to resolve them first!”

Answer 26

getStaticProps()

Question 27

Where does getStaticProps run?

Answer 27

server side

Question 28

What function do we call for server side rendering?

Answer 28

getServerSideProps()

Question 29

When is getServerSideProps run?

Answer 29

At request time

Question 30

When should you use getServerSideProps() ?

Answer 30

When you need data that has to be fetched at request time

Question 31

When should you use Client-side rendering?

Answer 31

Private, user-specific pages where SEO is not relevant

Question 32

When does getStaticPaths get called?

Answer 32

on staging: every request
on prod: every build