Top 3 in Tech: Web architectures, The T3 Stack, Interactive guide to Flexbox

There's many different ways to build a modern web application - but what different architectures exist, and how can you pick the right one for you?  ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

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?


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

Older messages

Top 3 in Tech: Remote work, Web Summit 2022, Remix joins Shopify

Wednesday, November 16, 2022

Remote work has taken the world by storm, and it can be a great way to save commute and stay productive. But is it the best approach for you? ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Top 3 in Tech: Data fetching in React, VueUse, A beautiful blog

Wednesday, October 26, 2022

Big news from the React ecosystem: data fetching is about to get a whooole lot easier 🔥 ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Top 3 in Tech: Learning to code in 5 minutes, Dynamic social images, the CIA website

Wednesday, October 12, 2022

Is it possible to learn coding in just 5 minutes? Let's find out! ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Top 3 in Tech: Dwelling on mistakes, Adobe acquiring Figma, Powerful new CSS selector

Wednesday, September 28, 2022

Hey hey, In this issue of the Top 3 in Tech newsletter we'll reflect on making mistakes as a developer (and how to learn from them). We'll also look at how Adobe acquired Figma for 20 billion

Top 3 in Tech: Landing your first junior development job, How NOT to learn web development, Whats.new shortcuts

Thursday, September 15, 2022

There's never been a more difficult time to land a junior development job - but there are some things you can do to greatly improve your chances. ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

You Might Also Like

Import AI 399: 1,000 samples to make a reasoning model; DeepSeek proliferation; Apple's self-driving car simulator

Friday, February 14, 2025

What came before the golem? ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Defining Your Paranoia Level: Navigating Change Without the Overkill

Friday, February 14, 2025

We've all been there: trying to learn something new, only to find our old habits holding us back. We discussed today how our gut feelings about solving problems can sometimes be our own worst enemy

5 ways AI can help with taxes 🪄

Friday, February 14, 2025

Remotely control an iPhone; 💸 50+ early Presidents' Day deals -- ZDNET ZDNET Tech Today - US February 10, 2025 5 ways AI can help you with your taxes (and what not to use it for) 5 ways AI can help

Recurring Automations + Secret Updates

Friday, February 14, 2025

Smarter automations, better templates, and hidden updates to explore 👀 ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The First Provable AI-Proof Game: Introducing Butterfly Wings 4

Friday, February 14, 2025

Top Tech Content sent at Noon! Boost Your Article on HackerNoon for $159.99! Read this email in your browser How are you, @newsletterest1? undefined The Market Today #01 Instagram (Meta) 714.52 -0.32%

GCP Newsletter #437

Friday, February 14, 2025

Welcome to issue #437 February 10th, 2025 News BigQuery Cloud Marketplace Official Blog Partners BigQuery datasets now available on Google Cloud Marketplace - Google Cloud Marketplace now offers

Charted | The 1%'s Share of U.S. Wealth Over Time (1989-2024) 💰

Friday, February 14, 2025

Discover how the share of US wealth held by the top 1% has evolved from 1989 to 2024 in this infographic. View Online | Subscribe | Download Our App Download our app to see thousands of new charts from

The Great Social Media Diaspora & Tapestry is here

Friday, February 14, 2025

Apple introduces new app called 'Apple Invites', The Iconfactory launches Tapestry, beyond the traditional portfolio, and more in this week's issue of Creativerly. Creativerly The Great

Daily Coding Problem: Problem #1689 [Medium]

Friday, February 14, 2025

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Google. Given a linked list, sort it in O(n log n) time and constant space. For example,

📧 Stop Conflating CQRS and MediatR

Friday, February 14, 2025

​ Stop Conflating CQRS and MediatR Read on: m​y website / Read time: 4 minutes The .NET Weekly is brought to you by: Step right up to the Generative AI Use Cases Repository! See how MongoDB powers your