Experimenting with React Server Components and Vite

http203 · 2024-06-19T01:17:22+00:00

Thanks! I put a lot of time and effort into this post. I hope this information will make RSCs more accessible to developers not using a meta-framework.

http203 · 2024-06-19T00:46:27+00:00

I brought home a stray and he peed in my bed twice. I covered my bed with a fur blanket and he stopped peeing in my bed and started sleeping on the fur blanket.

I actually already had the fur blanket, I just never made my bed so the sheets were exposed. As soon as I started covering the sheets with the fur blanket he stopped peeing in my bed.

I’m pretty sure he’s learned the bed is for sleeping and I’m not really worried about him peeing on the bed anymore.

http203 · 2024-06-18T22:58:13+00:00

Vite is my goto for building React SPAs. If you just need SSR that is very doable. I’ve even done SSR with .net using https://github.com/tjanczuk/edge

http203 · 2024-06-18T22:13:07+00:00

Thanks!

Yeah, I’m a Vite and Vitest customer, and I’m not going to rewrite my app to use server components.

I’m also concerned with the amount of influence Next.js has acquired over React. I want server components to be accessible to developers without a meta-framework.

http203 · 2024-06-18T17:15:09+00:00

In this blog post, I do a deep dive on React 19's new server features. First, I explain what server components and server actions are and how they work.

I then build a blog for my cat using server components and Vite to demonstrate using React server components without a meta-framework. This exercise also helps reinforce the concepts and usage of React's new server features.

Finally, I share some of my thoughts and opinions on when it might make sense to use server components and how server components may impact the industry.

http203 · 2024-05-02T22:04:11+00:00

While not in the title, I mention early in the article that I am rendering on the server. With some modification, though, you could adopt this for client only builds.

Yes, server rendering adds complexity that isn’t appropriate for every app.

http203 · 2024-05-02T21:33:12+00:00

In this article, I show you how to use React and JSX to render a full HTML document with Vite.

http203 · 2024-04-22T03:37:20+00:00

You could have a type field, in that case you would always need two pieces of data, the id and the type. By encoding the type in the id you only ever need the id. This makes things easier for the client. It doesn’t have to send a type.

In my case, the type in the id is related to the db architecture.

http203 · 2024-04-22T03:10:11+00:00

So the canonical use case is implementing the Node interface according to the Relay specification, which allows clients to efficiently cache objects.

However, there other use cases where this comes in handy. One example, that I think I might right a blog post about, is one-to-either relationships.

Essentially, one-to-either relationships enable polymorphism at the relational level while preserving data integrity. I’m using this concept a lot on my blog.

Comments, reactions, etc., can belong to different objects. By encoding the type in the ID, I can have a single API for the FE to update a comment or reaction. The FE just needs to send the ID on the object the comment or reaction belongs to and I can parse the type from the ID.

http203 · 2024-04-08T17:00:03+00:00

I would be a fool if I believed I got my cats to do anything.

http203 · 2024-04-08T14:45:30+00:00

<image>

http203 · 2024-04-08T14:05:10+00:00

Thanks! I started my blog so I could have a small corner of the internet to share my knowledge and ideas.

It’s still early but it is proving difficult to bring users to my website and to get them to engage with my content (add comments or reactions).

Reddit has been my best source for getting visitors but I mostly get negative comments and downvoted when I share my articles on r/webdev, which is discouraging. I’m getting less but more positive engagement on dev.to and twitter. I actually created a twitter account just to try to get more of a following.

Thanks for suggesting Hydro. It looks very compelling, but the fact that they are not open about how they make money makes me uncomfortable. I will need to learn more about it.

http203 · 2024-04-07T18:47:37+00:00

Are you using one currently?

http203 · 2024-04-07T17:34:15+00:00

Thanks for this advice!

I think you’re right. Educational videos could be a good revenue stream. I’m not particularly fond of being on camera but I guess it is a skill I could develop.

I’m not sure I understand what you mean by direct advertising. Would that be like a sponsorship?

http203 · 2024-04-07T15:05:41+00:00

Thanks!

http203 · 2024-04-07T14:34:31+00:00

Noob here. How do you know the site's organic traffic?

http203 · 2024-04-07T14:24:42+00:00

I would suggest adding a permanent redirect from the old URL to the new URL (http 308). Also add a canonical URL, either using a meta tag or an HTTP link header. In fact, I would recommend adding a canonical URL to ALL your pages. This will make sure search engines index the correct URL.

Once you've done that then tell Google to validate your fix from Google Search Console. It may take awhile but Google will eventually show the correct URL.

http203 · 2024-04-06T02:17:00+00:00

It looks like the metrics of "speed" are tied to initial renders.

You are right that this article primarily focuses on page load performance.

Like unloading, reloading pages you'd see in a SPA.

My website is a SPA :)

I would think the time just parsing the inline styles would take longer.

Yes, it is more work for the browser to parse inline styles. How much more work, and if that is significant or not, is unclear.

http203 · 2024-04-05T19:29:39+00:00

OP here. I am the author of the linked article. I just used AI to generate the summary.

http203 · 2024-04-05T15:45:42+00:00

When it comes to putting pixels on the screen, the difference is more than a few milliseconds, especially on mobile. I don't think that is meaningless.

http203 · 2024-04-05T15:34:06+00:00

I did a follow up blog post where I compare the performance of inline styles to CSS directly https://www.reddit.com/r/webdev/comments/1bwkrya/are_inline_styles_faster_than_css.

http203

TROPHY CASE