Web Development

3441 readers

11 users here now

Welcome to the web development community! This is a place to post, discuss, get help about, etc. anything related to web development

What is web development?

Web development is the process of creating websites or web applications

Rules/Guidelines

Follow the programming.dev site rules
Keep content related to web development
If what you're posting relates to one of the related communities, crosspost it into there to help them grow
If youre posting an article older than two years put the year it was made in brackets after the title

Related Communities

Wormhole

!cool_github_projects@programming.dev

Some webdev blogs

Not sure what to post in here? Want some web development related things to read?

Heres a couple blogs that have web development related content

https://frontendfoc.us/ - [RSS]
https://wesbos.com/blog
https://davidwalsh.name/ - [RSS]
https://www.nngroup.com/articles/
https://sia.codes/posts/ - [RSS]
https://www.smashingmagazine.com/ - [RSS]
https://www.bennadel.com/ - [RSS]
https://web.dev/ - [RSS]

Credits

Icon base by Delapouite under CC BY 3.0 with modifications to add a gradient

founded 1 year ago

MODERATORS

snowe@programming.dev

erlingur@programming.dev

Ategon@programming.dev

My Cheatsheet for Website Rendering Strategies (programming.dev)

submitted 1 year ago by o_o@programming.dev to c/webdev@programming.dev

4 comments fedilink hide all child comments

Here’s a quick summary of the different ways you can load a website.

SSR (Server Side Rendering): The classic way. Browser makes request to server, server creates an HTML/CSS/JS bundle, sends it to browser.

CSR (Client Side Rendering): The vanilla React way. Browser makes a request to server, server sends back JS code which runs on browser, creating the HTML/CSS and triggering browser to further make requests to load all assets.

SSG (Static Site Generation): The “gotta go fast” way. Server creates an HTML/CSS/JS bundle for web pages at build time. When browser requests a page, the server just sends this pre-built bundle back.

ISG (Incremental Static Generation): The “imma cache stuff” way. Server may create some HTML/CSS/JS bundles for web pages at build time. When the browser requests a page, the server sends this pre-built bundle back. If a pre-built bundle doesn’t exist, it falls back to CSR while it builds the bundle for future requests. The server may auto-rebuild bundles after certain time intervals to support changing content.

ESR (Edge Slice Re-rendering): The “cutting edge, let's get latency down so low it's practically in hell” way. Server does SSG and tells the CDN to cache the bundles. Then, it instructs the CDN to update the bundle in the event that page content needs to change.

In order of performance, usually: (SSG = ISG = ESR) > CSR > SSR

In order of SEO: (SSR = SSG = ISG = ESR) > CSR

In order of correctness (will users be shown “stale” information?): (SSR = CSR) > ESR > ISG > SSG

you are viewing a single comment's thread
view the rest of the comments

[–] Irongeek 1 points 1 year ago (1 children)

Surely the rendering is client side in all these - there are some servers that did some kind of server side rendering for low-power devices (AvantGo used to do this for palm, I think silk does something similar for Amazon fire) - but usually the serdar just sends instructions (html/css) which the client renders?

[–] o_o@programming.dev 2 points 1 year ago

It depends what you mean by "rendering". Of course, the visuals are only shown to users, and that happens on the browser.

But the browser uses HTML/CSS/JS to create the visuals (I'll call this a "bundle"). There are different strategies for how this bundle is created. The classic way is to just create it on the server on a per-request basis, and send it to the client. These ways I've listed are other ways.