We have Rails app with Webpacker that serves just the initial HTML file, after which the client will download everything (inc. vue .js and .css) files.
Our problem is that we want to display something initial on the html so the user will feel as the site already loaded. This logic is in the main vuejs component. Is there a way to offline render this so it will be easily be embedded on our index page? instead of having to maintain and re-write this everytime?
It sounds like pre-rendering might be a better fit for you than full-on SSR. Since you're already rolling Webpack, there is a plugin that helps to that end called prerender-spa-plugin: https://github.com/chrisvfritz/prerender-spa-plugin
The idea behind this plugin is that, as part of your build process, it prerenders the resulting static HTML of your SPA using Puppeteer (i.e. headless Chrome), and drops it into your static HTML folder. It maintains links to your SPA code so it's still fully functional, it's just fully rendered by the time the user hits it.
What I'd suspect you'd want to try is the following:
Add the prerender-spa-plugin to your webpack.config.js
Configure the plugin to prerender your initial route and any additional routes that are truly static
Output the resulting files to the folder your Rails app uses to distribute static assets (HTML, CSS, images, etc)
Going the pre-render route is actually technically superior to SSR for truly static routes like a landing page or marketing pages. You won't need to mess with a complex pre-render setup on your Rails server, you offload content distribution to the static folder (i.e. lesser load on your Rails server), and you still get to use all the benefits of your SPA.
That being said, if you strongly feel like you do need full-blown SSR, the generally "accepted" approach is rolling a Node.js server (https://ssr.vuejs.org/). If you decide to go down this route, I'd keep your SPA assets in their own separate Git repo from your Rails server and manage DevOps appropriately.
Good luck!
Related
So, I've built an SPA with Vue. We hire a designer to create a landing page. The landing page looks great. It shows some info about the app and there is a "Sign in" button that does nothing at the moment.
The landing page does include CSS and Javascript (jQuery etc) that I don't, and don't want to, use in the Vue app.
So the question is: Is it possible to include the landing page code in my Vue project without loading landing page JS/CSS if user is already signed in?
Plan B for me is to host the landing page on mydomain.com and the app on app.mydomain.com. This will work I guess, I see others do this. But it would be nice to know my possibilities
Did some search and didn't find exact solution to your issue, however it seems that this is doable. I have some concerns regarding the head part of the page, but this is a way to start:
Create new Vue component that will include all the HTML code (body only) that you need + install (with npm) and import all needed js files, including jQuery, in that component.
Make sure, that you configure this component as lazy loaded in vue-router - so all your html and scripts will be separated from the app.
From there Vue should do the job - you will get your page where needed and other routes will be inside the app.
I came across vuexpress, vuepress and vue-server-renderer. To me these are looking somewhere similer which I guess are not. I am not frontend developer so not able to understand exact difference and use of these three modules.
Their official sites are saying
https://github.com/vuexpress/vuexpress
vuexpress: Vue + Express.js = VueXpress / A server side rendering
engine for Express.js. Use .vue files as your express.js templates.
https://vuepress.vuejs.org/
VuePress: Vue-powered Static Site Generator
https://ssr.vuejs.org/
vue-server-renderer: server-rendered Single-Page Applications using
Node.js as the server.
vuepress and vue-server-renderer are official library from Vue.js
So what exactly are differences and use of these three modules?
The idea with Vue (from the perspective of your question) is that you create a single-page application.
vuexpress is a rendering engine you can use in an Express application if you want to use the Vue syntax to implement your Express views, i.e. you implement a dynamic website and use the Vue syntax.
vuepress is about building a single-page application in Vue that also prerenders each page (and some other goodies, such as using markdown) to improve initial page load and facilitate for search engines. It is primarily used for websites with static content, such as documentation.
The point with a Vue application is to run it on the client (in the web browser). With vue-server-renderer you can run it on the server to obtain the HTML code the web browser would render if it would run in the web browser, and send it to the web browser, so the web browser doesn't need to run your Vue application, but receives the HTML it would display instead. Why? To improve initial page load and facilitate for search engines. I imagine vuepress makes use of vue-server-renderer under the hood.
I'm studying nuxt.
I leave a question because I have a question while studying.
nuxt can ssr, but ssr is known as server side rendering.
Then, I wonder where the server is.
Because vue is built on node, is the server automatically made into node server?
And, how is SEO possible if we make it with nuxt?
I understand that it is possible if you make html with MPA. However, using nuxt makes SEO possible.
So, when you create a project with nuxt, does the client make it an MPA when it makes the first request?
where the server is?
Depends... Nuxt include a node server (nuxt), but you can during the nuxt instalation merge them with other node server frameworks
when use nuxt alone or with other server-side framework?
Depends of your needs, knowledge and project.
For example I usually use nuxt alone, more apollo graphql it give me all I need. but for Shopify apps, the admin embed login is write for Koa and super easy to use so I prefers nuxt + koa when I develop this kind of app.
what means ssr?
server side rendering, the important thing is Rendering, that means nuxt (or nuxt + extra server-side framework) read the vue (js) code in the server and rendered them in Html code, after that it send the html to the client machine.
This is the reason why SEO is possible, when a web crawler visit the site it receive a fulfilled HTML page easy to read and clasify.
Nuxt has a really extensive and easy to understand guide, I recomend you follow them. Example you can use Head for edit the Header of the page,
I have this reactjs webapp - http://52.26.51.120/
It loads a single page and then you can click links to dynamically load other boards on the same page... such as 52.26.51.120/#/b, 52.26.51.120/#/g
Now the thing is, I want each of these to be an individual page, for the purpose of seo. I want you to be able to google "my-site.com g", and you will see the result 52.26.51.120/#/g. This obviously cant work if you are using reactjs and it is all on one page. Google will only render and cache that main page (can it even render that page? does google execute javascript?)
Even more specifically, id want something like my-site.com/g/1234 to load a thread. There could be a thousand threads every day, so im not sure how to handle that.
Are there any solutions to this? to allow react to possibly serve up static pages as html so that they can be cached on google? I am using expressjs and webpack as my server right now, and all the code is executed in jsx files.
Thanks
You can use Prerender.io service. In a nutshell you will need to connect your server app or web server with prerender service and do little setup (see documentation). After that search engines and crawlers will be served with a static (prerendered) content while users will get classic React.js (or any other single page) app.
There is a hosted service with free tier or open source version
I suspect you could do some smart configuration with nginx and it could convert a url of domain/board to a redirection of domain/#/board when detecting the user-agent as a bot instead of a typical user.
We are looking into the new bundling feature of ASP.NET MVC 4 and are wondering if there are any advantages to bundling CSS files that are served from a CDN?
Is there even a way to bundle multiple files served up from a CDN in ASP.NET MVC 4?
This doesn't work:
var cdnCssPath = "http://MyCdn/css/";
bundles.Add(new StyleBundle("~/Content/css", cdnCssPath)
.Include("~/Content/site.css")
.Include("~/Content/Test1.css")
.Include("~/Content/Test2.css")
.Include("~/Content/Test3.css")
);
Any ideas?
First of all it depends on if you have access to a CDN where you can upload your own files or if you're using, for example, google's CDN to get external libraries like jQuery.
If you pull files from a CDN and bundle them, you would lose the advantage of using a CDN unless you're able to upload your new bundled file to the CDN.
For example if you get jQuery and jQuery UI from google's CDN and bundle them, you're no longer using google's CDN, you're instead serving up local resources (the created bundle).
You may have reduced the number of requests, but instead of 2 requests too google's CDN (which has a high probabillity to be cached already by the users browser) there's one request to your server (which is not as likely to be cached).
So in short I would say that there's no advantage to bundle files together that comes from a CDN, however uploading your bundled files to a CDN is different story.
Do note that it is possible to use use CDN for bundles though:
look at the "Using a CDN" part of this article
Edit: Here's an article that explains when to use a CDN or not and why, a bit more indepth than my answer http://www.kendoui.com/blogs/teamblog/posts/13-11-07/know-when-to-cdn.aspx