Question: effects on performance / SEO?

[nandorojo]

First of all, thank you so much for this library. I'm building a responsive design system for React Native (+ Web) and this project is a life-saver for SSR support and good web integration.

I came across this project here: necolas/react-native-web#1318

I have a question regarding the approach of rendering every breakpoint from the server. I definitely agree in principle that this is the best solution to the many trade-offs.

That said, in your experience, is there any significant speed delay loading a website that might have 4x the content? Since I'll be using 4 breakpoints to render the same content with different styles, this would be my experience.

Also, have you had any negative experience SEO-wise printing the same content multiple times on a page?

I haven't done enough testing to know if either of the above are real problems. I just figured I'd ask people who have been using fresnel if they ran into either, or if they're non-issues altogether.

Thanks again!

[damassi]

Hi @nandorojo regarding your questions:

That said, in your experience, is there any significant speed delay loading a website that might have 4x the content? Since I'll be using 4 breakpoints to render the same content with different styles, this would be my experience.

We go into it in more detail in this blog post but we tend to think about using this library sparingly, in places that have radically different layouts that can't be accommodated by media queries. Not that we've seen significant speed issues, but we try to think conservatively about it.

Also, check out the Tool 3: @artsy/detect-responsive-traits section in the post; that will go into some detail about how to further optimize the page to only render specific breakpoints on the server. That might be just what you need!

Also, have you had any negative experience SEO-wise printing the same content multiple times on a page?

We've had no observable SEO impact.

[nandorojo]

Thanks so much for the quick response. Great to hear re SEO.

As for the performance / multiple rendering issue, this is probably something I'll have to live with and test over time. The components I'm building are strictly UI primitives and won't have any side effects/network effects, so based on the article, I assume wrapping them with fresnel won't be a problem. Since I also want to support Static Site Generation, I'm not sure if I can rely on detect-responsive-traits, but maybe I can still add it. I'll look into it.

Since I'm using React Native + React Native Web, I can't inject any actual CSS into my component's styles, so the fresnel API seems like ultimately the best solution for me.

Thanks again!

[damassi]

Np! Feel free to reopen if you have any other questions.