Without using NUXT or GRIDSOME, can i pre render my vue app with my prismic blog pages? Currently pages, where my prismic blog is located, shows a long loading spinner, then after 4 - 5 seconds shows the blog content. I would love to pre render this data and save it to a html file and serve that through any static server.
Having pages that need to wait for content seems like a tradeoff, my data doesn't change that often, so i would be happy to do it at build time, but dont need all the features of nuxt or gridsome for this.
Sadly most of those packages have no maintainer nor have they been updated within the last 2-3 years, with dependencies being out of date. I spoke to a few of the ex-maintainers and even they wouldn't use their package anymore. (this includes the "un-offical" vue pre-rendering package mentioned in the vue docs.
My only other option now is to roll my own puppeteer headless chrome and see how that works out, but that will be an uphill battle.
I have prismic installed on a route '/about' for example, and google cant index it saying it's showing as a 404 page.
I wonder what everybody else here is doing with single-page applications with any headless cms including Prismic. They can't surely all be running SSR with nuxt or next, that can't be true, these solutions are overkill just for simple pre-rendering. I was hoping to come here and find somebody else that has already figured out a solution that is scalable and has been tested,.
if you have any other options, please let me know what i could try.
I am looking for a CMS that ideally can fetch data at build time, hence there wouldn't be a requirement to fetch via on run-time. Can i do this with prismic cli?
Most of our users use Nuxt, Next, or Gatsby, as opposed to just React or Vue. Prismic can definitely provide data at build time or run time, but I don't believe that Vue is designed to serve static files on its own.
If you're looking for a simple solution for a static site, maybe you could check out Eleventy. There's a new open source Prismic–Eleventy plugin, and I'm sure the developers would welcome feedback.
Alternatively, we just published a tutorial for building a site with SvelteKit, which can build very small statically-generated web apps, with or without client-side routing. Let me know if you want more information about that.
Appreciate the time taken to reply and provide insight.
Thanks, I'm not using nuxt because we don't need or require SSR (i.e a node server to host). Instead we host on a static web server like aws s3, which scales far better. Vue creates a single page application which can be hosted on s3 or any static host, without any other software, same like React or Angular.
But since its a SPA all 'content' will need to be fetched at run time from prismic hence my dilemma. Users have to wait for content to be loaded as opposed to it being there already when i had it without prismic , (content was previously hard coded in the html files)
We also dont need the other features provided by Nuxt, gatsby, gridsome etc. All we need is for the files to built statically. I am sure i cant be the only person with this use case.
Yes vue does not provide any tooling for pre-rendering (apart from some out of date 3pl) because they are focused on being a single-page application, and they try to force you on to Nuxt when actually you probably don't really need a framework on top of the framework, but you just need to pre-render certain routes on build time.. Hope I am making sense.
I cant use sveltekit because our app has been built with vue already.
I will check out your other options.
Another final way is to use a headless chrome puppeteer and manually integrate it with webpack build to built out the routes..
This is what Im looking for:
'npm run build'
webpack build files as normal
build will detect that certain routes require to be pre-rendered or being made static for example /about /index /contact
fetch all apis, await for data (i.e prismic routes)
create .html files for each of those files
save files in /dist folder
do the rest of the things that webpack does.
once again i realize that prismic is a headless cms, and was only hoping that you have come across users who need content to be built at build time injected in to the html and served on a static host.
I think Nuxt might be the best option for what you're describing. Nuxt is actually very popular as a static site generator. Nuxt+Netlify is a very popular stack, and Netlify is a serverless platform. Here, Netlify has a post about using static rendering with Nuxt. With Prismic, you can regenerate your static site with webhooks.
So, if you add Nuxt to your project, it will provide your bundling and static generation without SSR.
One potential downside is that Nuxt comes with a router built-in. You might be able to disable the router, though I'm not sure.
Let me know what you think! I'm happy to ask my coworkers for more ideas if you don't think Nuxt could work.
appreciate your response, yes nuxt would be good if I was starting out with nuxt, but we're too far in the app now to install nuxt just for pre-rendering, it would pose a lot of refactoring and re-writes to our existing router and application layout, including a change in folder structure etc.
I am right now looking at 11ty to see how nicely it integrates with vue first. Vue has something called Vuepress which is a static site generator and looks like it could work, but then I read it only grabs data from markdown files, and not from api's. (as far as I know)
yes if your coworkers have any other suggestions, let me know.
P.S.If you ever wrote a blog post titled 'Vue + Pre rendering/Static Site + Prismic' you will get a tonne of hits to your site.
i tried 11ty, but the docs say templating engine does not support .vue files and it will be hard to get it going with a framework unless I use .md or .pug etc.
Im currently trying out vue press but that only works with mark down files. Which means I will have to write my content in mark down and keep the content stored locally (and that means no primsic) well ill let you know.
