NextJS Flashcards
What are the 3 base components of web development?
HTML, CSS, Javascript
How is the DOM represented?
Javascript representation of HTML
Who keeps the DOM and HTML in sync?
The browser
What is the virtual DOM?
a javascript representation of the DOM created by React to allow for faster updates
Explain imperative programming vs declarative programming using an example
Imperative is like giving recipe instructions to someone to make a pizza.
Declarative is like ordering a pizza without being concerned how its made.
is React a declarative or imperative library?
declarative
What’s an example of a JS compiler?
Babel
Why do you need to compile your React code?
React uses JSX which needs to be compiled into JavaScript.
What is a component?
React’s tool for UI blocks.
What do components return?
JSX
What is SSR?
Server Side Rendering: the HTML of the page is generated on the server at request time
What is SSG?
Static Site Generation: the page is generated on the server, at build time, and stored in a CDN.
What function should you export if you want to generate HTML on the server at request time?
getSeverSideProps()
What function should you export if you want to generate HTML on the server at build time?
getStaticProps()
When should you use getServerSideProps()?
When you want data to be fetched at request time
When should you use getStaticProps()?
When the page’s data is available before request time. ie very good for SEO
Name 3 ways to serve your app:
Origin server, CDN, Edge
What’s the command to create a new nextJS app?
npx create-next-app
Whats the common command to run the app?
npm run dev
What does CSS Modules automatically generate?
unique class names
What does CSS Modules allow us to do?
CSS Modules allow us to scope styles to components
Whats the name of the file to create global CSS?
_app.js
How would you apply a style globally?
- Create a layout component
- Create a global.css file and make updates there
- Import global.css to layout
Where can you import global CSS files?
Only inside pages/_app.js
Define hydration
When a page is loaded by the browser and the JS runs
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!”
getStaticProps()
Where does getStaticProps run?
server side
What function do we call for server side rendering?
getServerSideProps()
When is getServerSideProps run?
At request time
When should you use getServerSideProps() ?
When you need data that has to be fetched at request time
When should you use Client-side rendering?
Private, user-specific pages where SEO is not relevant
When does getStaticPaths get called?
on staging: every request
on prod: every build
