Next.js 根据设备渲染组件

Question

I'm creating a component that has 2 different variants (one for mobile, another one for desktop). The logic is the same, but HTML structure and CSS - totally different. I decided to split those views into separate components.

In my project, I use ISR so the page will rebuild every one minute.

I'm trying to sort out the thing with showing a proper component depending on the device - how to do it correctly (note that it's a static generated page)?

I tried to use media queries, but it looks like when I render both components, I have a problem with duplicated HTML IDs.

Thanks!

Answer 1

If page generated at build time, you don't have much options here.

First option would be to assign different id s to elements and hide one with css. You then can determine in runtime which one is visible if needed. Second option, is to render component only on client side after hydration. This is assuming that you use client side javascript. Then you can opt out of static generation for this particular page or set of pages.

Here is one more thing you can try, depending on your markup. If you have markup like this:

<div id="my-id" class="big"><!-- big screen content here --></div>
<div id="my-id" class="small"><!-- small screen content here --></div>

You can turn it into this:

<div id="my-id">
  <div class="small"><!-- big screen content here --></div>
  <div class="small"><!-- small screen content here --></div>
</div>

This way you will have single id and two different contents.

Opinion part that may not align with your goals:

Best way to do it would still be one set of markup with different styles for different window sizes. This way users will see appropriate version after they resize their browser window or zoom in. And users who can't use pointer device will not loose their focus after resizing browser window.