NEXT JS


Web Development

Updated May 25th, 2021

Quick Access Articles: Import Font-Awesome and Import Google Fonts. Implementing Lodash for Throttle and Debounce.

Big Picture

I want to use Next to server-side render on first page load then have everything else be client-side rendered, and not necessarily with static site generation.

The thing it took me a bit to understand is that there is server-side-rendering (with different pre-rendering approaches) and client-side-rendering. What this means is that GSP and GSSP are both still SSR. Also GSP doesn’t necessarily mean SSG and with SSG, the site can be rebuilt to reflect any changes with revalidation. With Next, it seems the options are limitless because there are handful of different techniques and they can be comingled in one application. So you could have a site that uses GSP and GSSP and some parts are static and others are not. These different approaches and the ability to combine them took me a while to wrap my head around.

Authorization or Data that changes multiple times per second (think stock quotes), will likely require GSSP. But in the same app you could have a blog that could use SSR via GSProps and GSPaths to have blog posts be statically generated.

My portfolio page, which may or may not include a blog, should use Next for SSR/GSP/SSG since it will likely be updated only when I want to change my resume.

In the case of the Car-Cost-App or something similar with authentication and user-specific data, you will want to SSR via GSSP.

There are even data-fetching strategies for SSR/GSP/SSG for “with-data” or “without-data.” Without-data being a simple about page or marketing page that does not change and with-data being a products page.

There is also a static generation without data with fetching on client-side. This is where you pre-render a skeleton with a loading spinner and on the client-side we make a request to external data and fill in the page with the data when that fetching is complete.

There is an useSWR hook which a custom hook created by the folks at Next and this is basically a Next JS library and sounds more like what we are talking about.

Hosting

I don’t know how expensive it is but I’m pretty sure you can host a note application on Vercel And you cannot on Netflify. So unless it’s outrageously expensive I think you just scrap heroko for Vercel and utilize maybe one project on the free account for Netlify but versail les and Siteground should just be the primary accounts.

Random

Decent article here on fetching strategies.

Interesting take here to skip Next.js

What is getInitialProps()? Is this a thing any more? Bruno had a video on it but nothing in Max’s course. Apparently it was created to fix the fact that useEffect doesn’t work in next server-side rendering and whatever you define here gets passed into your component?

API Routes

What a sec, why even bother with Express server using node and heroku? This is a valid question although it’s not for everyone because many projects have an existing API. I also haven’t seen the cost of hosting on Vercel versus Heroku so this may be a deciding factor as well. But yeah, front-end and back-end in one application sounds great, especially if you are starting a project from scratch.

Watched an example video from Bruno Antunes that had a user’s profile data needing to be saved and displaying user-specific content. He had an endpoint app.com/api/person/:id with both GET and PUT endpoints. He also had an endpoint to get all users and all vehicles. There was also an endpoint to get all vehicles specific to a person via app.com/api/person/:id/vehicles.