nuxt icon indicating copy to clipboard operation
nuxt copied to clipboard

Can client-side rendering and server-side rendering be supported at the same time

Open Y00z opened this issue 1 year ago • 2 comments

In a nuxt project of server-side rendering, can you set the specified route page to render for the client, and how to operate and configure it? Thank you.

Y00z avatar Jul 27 '22 02:07 Y00z

hi @Y00z if you have problem with some plugins that only work on the client site just register them and use mode client only according docs here.

silvesterwali avatar Aug 30 '22 09:08 silvesterwali

create a file in server/middleware named nossr.js (or whatever you'd like)

insert the code below and change url's according to your project.

const urls = ["/url1", "/url2, "/url3/path", "/url4"];

export default defineEventHandler((event) => {
    if (urls.includes(event.req.url)) {
        event.req.headers["x-nuxt-no-ssr"] = "true";
    }
});

With this middleware running, nuxt renders selected paths only on client. You can write much more detailed version yourself (like wildcards, filtering out querystrings, etc.)

Of course not to mention, this method works for Nuxt3.

serdartepeyurt avatar Sep 08 '22 23:09 serdartepeyurt

Let's track in https://github.com/nuxt/nuxt/issues/24866.

danielroe avatar Jan 03 '24 11:01 danielroe