​

Hi there,

Your boy Mads here once again hitting you up with some web development goodies for your entertainment and learning pleasure. Some really solid technical content in this one (if I do say so myself. Which I do). So let's just get started:

​

1. Web architectures

There's 3 important rendering modes to understand when deciding on the architecture of your web application:

1. Server-side rendering
2. Client-side rendering
3. Static site generation

With server-side rendering, your server runs the code to generate a full HTML page that is sent back to the user.

This is how traditional languages like PHP, Ruby and Python work. Your server does the majority of the work, and the result is often less layout jank and better SEO (at the cost of higher time to first byte).

Client-side rendering, the most common pattern in Single Page Apps (SPAs), is different. Here the server immediately returns an HTML file with some meta info and a single div + a JavaScript file. The JS then fetches the required data to build out the page.

This method has a quicker time to first byte, as your users immediately get the initial HTML. Loading spinners are then often used while the rest of the data is fetching on the users device. This is not always a better user experience, but can be easier to host and manage.

Here's a diagram illustrating the two request/response cycles. The green boxes are where the majority of the computing work happens.

The final option is static site generation. This basically combines the two, so you perform a server-side render ahead of time (at "build time") to generate every page in your application. When a user requests any page, the server simply responds with the full, pre-generated HTML. This is great for performance and SEO, but makes it impossible to generate dynamic pages (think Facebook / Twitter feeds etc.). You also can't reasonably build large sites with lots of pages (like Wikipedia or big news outlets).

I think it's really important to understand the tradeoffs between these different models to make educated choices depending on the needs of your application. But as a rule of thumb, here's some generic guidlines:

1. Use SSR for most dynamic pages / apps. The beauty of SSR is that, with frameworks like NextJS, your app becomes a standard React app after the initial rendering - so you can still do everything CSR would allow you to do.
2. Use CSR if SEO isn't important or you rely heavily on browser API's like "window" or "document" (as those aren't available during SSR) or you want to host your project on the simplest possible static site hosting service.
3. Use SSG for simple marketing / blog websites with less than 1000 pages and at most a few daily changes (as every change requires regeneration of the whole site) and you also want a simple way to host the project.

Hopefully this helped clear up any missconceptions of the different rendering modes - and helps you decide on the right architecture for your next project!

​

2. T3 Stack

On the topic of rendering modes, NextJS is quickly becoming my favourite front-end framework as it supports all the different modes out of the box and so much more. I have a personal soft spot for Vue, but the features and ecosystem of NextJS / React is just incredible.

So a few weeks ago I came across an amazing Youtuber / Twitch streamer called Theo. He shares detailed and nuanced takes on everything around React and TypeScript (definitely check him out!). He's also the creator of the "T3 stack", which is really just a pre-configured, opinionated collection of awesome tools and libraries to create full-stack NextJS applications.

It combines NextJS and TypeScript with Prisma, NextAuth, Tailwind and a package called tRPC to ensure typesafety across your entire application. At first it seemed like quite a mouthful to dive into, but now that I've been playing with it for a few weeks it's amazing. I've always felt a bit limited as a front-end developer in that I couldn't easily save stuff to a database or create projects that required authentication. But with this stack, every front-end developer can focus on building killer full-stack apps while the packages take care of the heavy lifting for you.

If that sounds interesting to you, make sure to check out the website for a breakdown of the different packages, and then head to the documentation to get started with your full-stack app!

​

3. An interactive guide to Flexbox

Fans of the newsletter know that I absolutely love Josh W. Comeau. He's one of the best web development teachers I've ever seen, and he recently published yet another banger. This time on everyone's favourite (and at times, frustrating) CSS layout technique: Flexbox.

Josh goes into great detail on every important aspect of Flexbox: direction, alignment, growing and shrinking etc. And he does it all with lots of visual and interactive demos to really get the point across.

It might just be the best blog post you read this year, so you definitely don't want to miss it:

​Check out the interactive guide to Flexbox here​

​

That's it for now! See you soon

​

Did you enjoy today's newsletter?

​

• ​👍 Yes, it was amazing!​
• ​😐 Eh, I guess it was ok​
• ​👎 Not really at all​

​

​

I would really appreciate if you would share the newsletter with your friends on Twitter, LinkedIn, Facebook, by email or copy/paste the link mads.fyi/top3 on other platforms. It really helps to keep me motivated and let the newsletter grow. See you in 2 weeks ✌

— Mads Brodt