added readme notes

Author: justinTsugranes

README.md

@@ -77,7 +77,43 @@ It is the best tutorial series on Next.js by far and is over 70 videos long.
 
 ---
 
-### Original Next.js README info
+## Supplemental Notes
+
+### Difference between rendering methods in React and Next
+
+By default, Next JS pre-renders every page in the application. This means that it generates HTML for each page in advance insead of having it all done by client-side JavaScript
+
+In a React app, the JavaScript is loaded which then executes to load the HTMl elements onto the DOM. We just have a div tag with Id tag equal to root. Once the javascript for the page is loaded, it will exceute in the browser, create the different DOM nodes and mount them onto the root div element. This process is called Hydration.
+
+In a Next app, the pages are pre-rendered automatically by default, meaning the HTML is already generated with the necessary data and then sent to the browser. The JS then loads and makes the page interactive.
+
+### Why pre-render?
+
+1. Pre-rendering improves performance
+   1. In a react app, you need to wait for the JavaScript to be executed
+   2. Perhaps fetch data from an external API and then render the UI
+   3. There is a lag time for the user
+   4. With a pre-rendered page, the HTMl is already generated and loads faster
+2. Pre-rendering helps with SEO
+   1. This isn't as big of an issue with sites that are built behind a login screen, but if you're building something like a blog or an e-commerce site, then SEO is a concern.
+   2. With a react app, if the search engine hits your page, it only sees a div tag with id equal to root.
+   3. If search engines hit a pre-rendered page, all the content is present in the source code which will help with crawlers that are indexing the page.
+   4. If SEO is of concern for app, then pre-rendering is what you want
+
+### Pre-Rendering in Next JS
+
+NextJs supports two forms of pre-rendering
+
+1. Static Generation - Done by default in Next apps when we build for production
+   1. Static generation is a method of pre-rendering where the HTMl pages are generated at buildtime
+   2. The HTML with all the dats that makesup the content of the web page are gnerwated in advance when you build your applicaiton
+   3. Pages can be built once, cahced by a CDN and served to the client almost instantly
+   4. Great for blogs, e-commerce, product pages, documentation, and marketing pages
+2. Server-side Rendersing
+
+---
+
+#### Original Next.js README info
 
 This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 

notes/README.md

@@ -38,7 +38,7 @@ Next.js uses a file based routing system.
 
 - Catch All Routes - add three dots (like a spread operator) inside square brackets to create a catch all route. They're helpful if you want different URLs for the same page layout or even when you're working with pages where some of the route parameters are optional.
 
-To navigate to other routes (pages), we wrap the heading for those pages in a Link (capital 'L') component and have the href point to the corresponding internal page via '/PAGE'
+To navigate to other routes (pages), we wrap the heading for those pages in a Link (capital 'L' to distinguish from plain HTMl and JavsScript) component and have the href point to the corresponding internal page via '/PAGE'
 
 Place Order Button: first, we add the button and give it a click handler. Next, we define the handler through a const. Within, the order body, we're assuming the order was placed successfully and log 'placing your order'. Then, the user should be programmatically navigated to the products page.