* ###### tags: `React` `SSR` `Learning` # What is SSR? Server-side rendering is when content on your webpage is rendered on the server and not on your browser using JavaScript. --- # Why SSR? Traditional React apps make multiple requests before presenting content to the user. SSR builds the content on the server and presents it immediately, *then* does the React stuff like getting data. ## Benefits ### Performance SSR apps break JavaScript and CSS into chunks, optimize assets, and render pages on the server before serving to the client browser, resulting in a faster initial load time. ### SEO With SSR search engine crawlers can explore the page to improve your app’s SEO performance. This is because all pages are rendered on the server with the relevant metadata, paragraphs, and headings before being served to the client, enabling you to get the benefits of a traditional website’s SEO. ### User Experience After the initial load, Universal SSR apps behave like typical SPAs in that the transition between pages and routes is seamless. Only data is sent back and forth, with the HTML content holders not being re-rendered. --- # Architecture ## Render App The purpose of this application is to render the react application as HTML and return it to the client. That way when the page is loaded it will have a static version of the React app immediately, without making additional requests. ## Client App The content returned to the client via SSR is a pre-built/**static** version of the React app. That said, event handlers and other interactive functionality (the purpose of React) are not included in that static rendering. ### App Setup The way to fix this is to setup a client-only application. 1. Setup client application that contains your entire React app 2. Modify Webpack config to output that client app into a *public* directory 3. Modify the render output string on the server to output a small HTML file that links to/pulls in the output (build.js for example) of the client app --- # References * https://blog.logrocket.com/improve-app-performance-react-server-side-rendering/#what-is-server-side-rendering
Last changed by  
 
Kevin Marmet
54

Read more

HTML

What is HTML? HTML stands for Hypertext Markup Language but more importantly it is the base or structure for building web pages. If you see a paragraph on a website, that was written in HTML. HTML consists of elements such as paragraphs that are represented as tags, which we will discuss soon. These tags such as paragraph or table are not displayed in the browser but are rendered by the browser. HTML Documents All HTML documents start out with a base or template and then more elements are added after that. This base template is required for all HTML documents. <!DOCTYPE html> <html> <head> <title>Page Title</title>

4/10/2020
CSS

==DEMO AS MUCH AS POSSIBLE== What is CSS? CSS stands for Cascading Stylesheets. Where HTML is the structure and layout of a webpage, CSS is the styling of the webpage. Cascading means that the styles are ordered by importance from the top down. Meaning styles at the bottom of will typically override styles above them, but we will discuss what that means coming up. Syntax CSS is very simple and straight forward. A rule, or a block of code that defines the styling for an element, consists of selectors and name/value pairs.

4/10/2020
Read more from Kevin Marmet
Published on HackMD