Tuomo Kankaanpää

Switching to Server Components cut 300KB from my Javascript bundle and pages started loading twice as fast.

If you're still fetching data in Client Components, you're shipping extra code and slowing down your app.

Here’s why I always strive to fetch data inside Server Components in Next.js:

1️⃣ Faster initial page load

Users see real content immediately.

👉 No layout flashes or loading spinners
👉 Lower FCP times
👉 Feels smoother on mobile and slow networks

Javascript doesn’t need to boot up before something appears. The HTML is already there.

2️⃣ Fewer client-server round trips

Client-side fetching adds extra steps.

With Server Components:

🎯 The server fetches the data close to the source
🎯 HTML and data return in a single response
🎯 Less latency, especially for users far from your backend

3️⃣ Smaller Javascript bundles

No hydration. No unnecessary client code.

Benefits:

✅ Faster time to interactive
✅ Lighter downloads
✅ Only ship Javascript for interactive parts

Server Components aren't just a trend. They're the better default for most data-fetching use cases.

Start with one read-only component. Move the fetch to the server.

You’ll feel the speed difference immediately.

--

📌 Want to start using Server Components with confidence?

Here's an Ultimate Guide for Server Components that will help you:

- Build performant Next.js apps
- Choose the right component for the job
- Build secure apps with confidence

Get it here: serverandclientcomponents.com/

4 months ago (edited) | [YT] | 8

Tuomo Kankaanpää

Web Development 101

I've worked in the web dev industry 10+ years.

Here's 5 insights on web development that I wish someone had told me when I was starting out:

1️⃣ You learn as you go

Things evolve on such a fast pace that it's impossible to know it all.

More important than knowing it all is to be able to learn and adapt.

Only way to succeed is learn as you go.

2️⃣ Communication with others is vital

As a web developer you communicate all the time.

• Problem solving with peers
• Requirements gathering with clients
• Writing documentation
• Peer reviews
• Giving and receiving feedback

Clear communication ensures great results.

3️⃣ You rarely start a project from scratch

I can count with my fingers the times I've started a project from scratch in the past 10+ years.

More often than not the work is done to an existing project and you need to continue or fix someone else's work.

4️⃣ You don't need to be a math wizard

Rather than math, more important things are:

• Willingness & ability to learn new things
• Persistance
• Problem solving skills
• Communication skills

Focus on these rather than math and you will thank yourself.

5️⃣ A task is done once in production

A feature/task is not done when it's:
• almost working
• in review
• in testing environment
• ready to be deployed to production

Only when a task is deployed and running in production it is done.

--

PS. If you like posts like this, you might enjoy my exclusive newsletter.

- In-depth web dev content I don't talk about anywhere else
- Exclusive Q&A videos only for newsletter subscribers
- Lessons learned working +10 years as a web developer

Join hundreds of aspiring web developers: bit.ly/3G1RE8O

5 months ago | [YT] | 3

Tuomo Kankaanpää

What's the difference between Authentication and Authorization?

Authentication verifies a user's identity = who you are.

Authorization verifies that user is allowed to visit certain page or do certain action.

Don't mix these two up, they are fundamentally different things.

5 months ago | [YT] | 4

Tuomo Kankaanpää

I’m really starting to think that mastering the next big programming language doesn’t include learning the syntax for if statements and for loops.

But rather, it will require you to understand the thinking behind the solution you are building and then being able to explain it in plain English.

That’s because AI is getting better and better every day, and already, if you are not using it in your day-to-day work, you are risking of falling behind.

I think succeeding as a developer will come down to these three skills:

1. Understanding the underlying logic behind the solution you are building
2. Structuring the solution to clear and understandable steps
3. Writing clear and concise enough prompts

Using AI as a developer is definitely not about copy pasting code.

The importance of understanding what you are doing, has never been more important.

6 months ago | [YT] | 7

Tuomo Kankaanpää

The outdated way of prepping for an interview:

- Spend hours watching outdated web dev tutorials
- Build generic portfolio projects that look like everyone else's
- Frantically Google "top React interview questions" the night before

All that hard work for sweaty palms and blank stares when they ask about state management?

Here's the new path:

- Chat with AI about the latest web frameworks like you're talking to a friend
- Have AI review your code and suggest modern patterns that impress interviewers
- Role-play technical discussions where you can mess up without consequences

Here's how to get started:

- Ask an AI buddy (ChatGPT, Claude, etc.) to explain that tricky CSS concept you've been avoiding (we all have one!)
- Upload your portfolio code and get feedback on where it could be more "senior-level"
- Practice explaining your project architecture to AI - no judgment when you ramble!

Landing that awesome web dev job is hard, but worth it... and maybe even a little fun now.

6 months ago | [YT] | 8

Tuomo Kankaanpää

Do you feel overwhelmed by AI?

You know you should use it, but just don't know where to start.

Here's 5 simple steps you can take to today, to start using AI in your coding without overcomplicating it.

7 months ago | [YT] | 3

Tuomo Kankaanpää

Things move fast in software development.

Languages, frameworks and tools evolve so fast that what was new 6months ago can be outdated today. We constantly need to learn new skills as developers so we don't fall behind.

There is one skill though, that has been essential for all my 10+ years as a developer and one that is not going to become obsolete:

Writing.

In fact, it is a skill that I need more and more as years go by.

It is a skill that every developer should invest in -- because it has a huge potential to transform your career.

How, you ask?

Tomorrow at 3PM EET I'll send an email to my newsletter subscribers explaining just that.

You can sign up here: bit.ly/hdpdev

8 months ago | [YT] | 5

Tuomo Kankaanpää

One of the coolest accessories I have gotten lately have been the Elgato Prompter.
​
It's a teleprompter but not a traditional one, because it enables you to use it as a second monitor.
​
This means that I can put any window from my computer to it.
​
I have in fact been using it quite a lot lately while in Teams meetings. I can put my VS Code to the prompter and code while maintaining natural eye contact to the camera and other participants in the meeting.
​
Meetings have gotten more interesting with Prompter.
​
#sponsored #elgato

1 year ago | [YT] | 5

Tuomo Kankaanpää

Code snippets are a developers' secret weapon.

I use snippets every day in my work as a senior software developer. They make me faster at coding by reducing the boilerplate code I need to write or copy/paste.

One upgrade I recently got to my snippet game was the Elgato Stream Deck Neo. I can bind multiple snippets to different buttons on it, and I find it super handy to use snippets with it because it is always sitting on my desk and I can get the snippet by just a push of a button.

Here's 7 of the top snippets I use with my Stream Deck Neo.


Snippet #1: Next.js Page
This snippet adds a basic skeleton for a page in Next.js. This is probably my most used snippet because I need it every time I work with Next.js


Snippet #2: GET Route Handler
I always struggle with remembering how route handlers are defined. I know they aren't that complicated to be honest, but that's just how I am.

So this snippet helps me with that, by inputting the skeleton for a GET route handler.


Snippet #3: POST Route Handler
Same thing as previous one, this one just inputs a POST route handler skeleton.


Snippet #4: JS Sleep
Sometimes I need to emulate a slow page or endpoint for example. I always had to google how to sleep in Javascript, so I added a snippet for it.


Snippet #5: Lorem Ipsum
Good old Lorem Ipsum text to be used in situations I need some filler data.


Snippet #6: Users JSON
Inputs a json array of couple of users. Super handy when I need some test data.


Snippet #7: Server Action Form
This one inputs a form (jsx) that has server action setup for the form submit.

I find it always hard to remember how all the attributes and definitions go, so by having a snippet for this exhilarates the development process greatly.


Alone any of these snippets is kind of a small improvement to my workflow, but once you start to have multiple small improvements, they start to build up.

#sponsored #elgato

1 year ago (edited) | [YT] | 7

Tuomo Kankaanpää

create-next-app is the most powerful tool for creating Next.js projects.

But it does a horrible job of explaining the prompts you need to answer to.

Here are all 6 prompts explained:


👉 1. Would you like to use TypeScript?

If you wish to use Typescript instead of Javascript in your app, you can choose it here and the tool will automatically setup the Next.js project to use Typescript. No additional configuration is required from you!

For quick demos & POCs Javascript is usually better, but if you plan on publishing your application Typescript is usually o better choice.


👉 2. Would you like to use ESLint?

ESLint is a tool that statically analyzes your code to quickly find problems and issues.

If you want create-next-app to automatically setup ESLint to your project select yes.

I usually use ESLint only for "real" projects and ones that I plan on publishing. For demos and smaller applications I don't use ESLint.


👉 3. Would you like to use Tailwind CSS?

Tailwind CSS is a CSS framework you can use to style your application using classes.

Selecting "yes" here will automatically set up Tailwind CSS for styling your application. No need for additional setup; you can start using it right away.


👉 4. Would you like to use 'src/' directory?

If you prefer to have all your code files inside src directory, you can define it here.

Choosing "no" places code files in the project root, like "/app/page.js". Choosing "yes" puts them in "/src/app/page.js".


👉 5. Would you like to use App router?

Next.js has two kinds of routers, Pages and App router.

App router is the latest version, so I recommend choosing that for any new projects, but if you wished to use the Pages router, you could select it here.


👉 6. Would you like to customize the default import alias?

By default, we can reference the "src" folder in imports with "@".
For example, we can import "/src/components/Profile.js" using "@/components/Profile.js" from anywhere in the application.

So if you want to change the import alias to something else than "@", you can define it in this step.


As you can see, we can do a lot of powerful customization, that saves time and effort, when setting up our Next.js project.

1 year ago (edited) | [YT] | 9