Webstacks Flashcards
Static Site Generation (SSG)
Static site generation is where your HTML is generated at build time. This HTML is then used for each request. Static site generation is probably the best type of rendering strategy for SEO as not only do you have all the HTML on page load because it’s pre-rendered, but it also helps with page performance – now another ranking factor when it comes to SEO.
Server-Side Rendering (SSR)
Like SSG, Server-Side Rendering (SSR) is pre-rendered, which also makes it great for SEO. Instead of being generated at build time, as in SSG, SSR’s HTML is generated at request time. This is great for when you have pages that are very dynamic.
Incremental Static Regeneration (ISR)
If you have a very large amount of pages, generating them all at build time may not be feasible. Next.js allows you to create or update static pages after you have built your site.
Incremental Static Regeneration enables developers and content editors to use static generation on a per-page basis, without needing to rebuild the entire site. With ISR, you can retain the benefits of static while scaling to millions of pages.
Client Side Rendering (CSR)
Client-Side Rendering allows developers to make their websites entirely rendered in the browser with JavaScript. On initial page load a single HTML file is generally served with little to no content until you fetch the JavaScript and the browser compiles everything.
As we commented above, in general Client-Side Rendering is not recommended for optimal SEO.
CSR is perfect for data heavy dashboards, account pages or any page that you do not require to be in any search engine index.
What is DRY
Dont repeat yourself
What is KISS
Keep it simple, smarty
YAGNI
You ain’t gonna need it
How to handle SVG Images in NextJs
Use normal image tab
When to use Static Generation
Marketing, blog posts, e-commerce, and help/docs. Nice to use with a headless CMS, not ideal when writing draft from a headless CMS and want to preview the draft immediately.
When to use pre-rendering
when it updates frequently
Difference between getStaticPaths and getStaticProps
Use ‘‘getStaticPaths” to fetch an array of product IDs and use “getStaticProps” to fetch data for each product ID.
Which one of the following is not a production optimization process?
Compiling
Bundling
Routing
Minifying
Routing
Minifying removes syntax highlighting from your code.
True - syntax highlighting is only needed in development
False - syntax highlighting is provided by your code editor
False
Which of the following is not a goal of code splitting?
Improve the application’s initial load
Only load the required code for an entry point
Delete redundant code
C
True or False: Build time is the period of time when an application is being built in response to a user’s request.
True
False
False
Can you have multiple rendering methods in a single Next.js application?
Yes - you can choose your rendering method on the page level
No - you need to choose your application’s rendering method at the start
yes
What is the edge
The Edge is a generalized concept for the fringe (or edge) of the network, closest to the user. CDNs could be considered part of “the Edge” because they store static content at the fringe (edge) of the network.
If you wanted to add a new route /authors/me, what would the file name be (including the directory)?
authors/me.js
pages/authors/me.js
routes/authors/me.js
b
Code splitting in Next.js
Next.js does code splitting automatically, so each page only loads what’s necessary for that page.
What does next/image simplify for you?
Uploading & storing images
Resizing & optimizing images
Cropping & color correcting images
b
What does next/script simplify for you?
Loading third-party scripts
Minifying & compressing scripts
Optimizing bundled script chunks
a