We are using this approach to rendering content:
<div id="full-article" v-html="content"></div>
this.content = api.response.data
In this approach, "content" is retrieved from an API, but because we also use Server-Side-Rendering (SSR), the final HTML is turned into this:
<div id="full-article">$real_html_content</div>
this.content = $real_html_content
This approach means that the content is repeated, once as rendered HTML, and once as a javascript variable. But in this scenario we are not using the javascript content variable. The fact that it's still included in the final HTML page means that the page size is twice as big as necessary. How can we prevent this? Is there some way of hiding/removing javascript content that has already been rendered by SSR?
Alternatively, maybe it would be better to deal with this content differently, perhaps insert it at a later stage and not involve Nuxt or SSR?
This is what you're looking for: https://github.com/maoberlehner/vue-lazy-hydration
Created by Markus Oberlehner who was seeking to avoid shipping to much JS to the frontend, especially when this was not needed.
You do have several options but this is how it can be used
<lazy-hydrate never>
<article-content :content="article.content"/>
</lazy-hydrate>
In this case, the hydration (injecting JS into static content) will never happen. There are other interesting options that can be used too!
Keep in mind that this was more of a proof of concept, hence why Markus still considers it as beta-ish. This project will probably die at some point because Vue3/Nuxt3 will be able to do this in an official way.
Still, even if I did not tried it yet, you can totally use it as of right now and enjoy a JS-light experience, it should work!
Related
Currently I'm developing a website using the following stack:
vue.js
#vue/server-renderer
vite
tailwind CSS
SSG was chosen as the rendering mode.
Tailwind, as described in the documentation, allows you to specify directories and file extensions (content property) , in which he will try to find the classes, in order to leave only those that are actually used in the project.
As a result, the 'main.css' file is formed, in which only those classes that are used remain.
Next, I just take this file and include it in every page that was rendered during the build phase of the project.
This results in:
index.html - main.css
about.html - main.css
blog.html - main.css
It turns out that main.css file may contain classes that are needed only for one of the pages and are not needed for others.
I would like to implement the following:
Take main.css which turned out
Render a page, for examle about.html
take only those styles that are needed for about.html page from the main.css file
create a new about.css file
link the resulting about.css styles to about.html
I’ve already tried to implement this using an awesome PurgeCSS tool as following:
render page content usind #vue/server-renderer's renderToString() method;
Pass an resulting css and html sources to PurgeCSS
here is an example
But there are too many corner cases around this solution, such as:
Dynamic classes which can be added to the html on the client side
Some components may be missing in rendered html and their content will be added later (for example, v-if directive was used on the component)
A few takeaways:
PurgeCSS is not needed anymore since Tailwind v2 (the latest being v3.x)
as far as I know, you cannot have code-splitting with Tailwind, not that it matters anyway since it will still perform okay with further optmizations
the classes that will be generated, will be only once for the whole app (hence no need to have a bg-red-500 for index or about page, both are referencing the same unique declaration)
if you want to have SSR/SSG, I recommend the usage of Nuxt (in it's v3 if you're using Vue3 or plan to have anything long-term)
dynamic classes are not possible with Tailwind, you can create things like bg-[#ccc] but it goes on the opposite side of what Tailwind is achieving and should be used exceptionally
for Tailwind's content, still the defaults on this page, section Configure your template paths, no need to do anything crazy or complicated
if you want to have some scoped/local style, style to using style scoped, you can still use Tailwind inside of those tags tho
if you want to write vanilla CSS into dedicated CSS files like index, about, blog etc, then Tailwind is probably not the best approach because this is not how it is supposed to work
stay simple, the performance will still be amazing. Only focus on not having too many screens, colors etc that you're not using
you could run some bundle size tests to see if the CSS is taking a huge chunk in terms of size. Will probably not, but if it still is: you can then start making complex configurations
JS will be far harder to reduce and be more impactful regarding the performance (because of how a browser works with it: parsing, executing is indeed blocking the main thread)
I'm using quasar and vue3 to build an SSR app
In chrome developer mode when I visualize the generated HTML, I have some Vue components not compiled to raw HTML like:
<body class="desktop body--light" data-server-rendered>
<div v-for="deal in clientssList" :key="client.Id">
<CLientItemSmDown :ClientModel="deal"></CLientItemSmDown>
</div>
is this normal, isn't SSR supposed to return raw HTML so bots can read it?
Saw this question last time already (can't find it back).
But no, CLientItemSmDown is a valid web-component and don't need to be transformed into a built-in HTML tag like input, div etc...
There is maybe an option to convert it down the road to some HTML, but I don't think that it's necessary and it may not be easily done if it's not supported by default.
That page may be quite interesting regarding Vue + Web-components.
You may raise a Github issue or join their Discord.
The TLDR being that it's fine to let it as is IMO.
Somehow I still can't wrap my head around some core vue concepts.
I have made some simple webpage using phalcon. Created it so, that it would work without JS and now is the time to add some bells and whistles - ajax queries and the like, for the user experience to be better.
I wanted to do everything using vue, to see how it all adds up. But after hours of googling I still can't find solution for the simplest of tasks.
Say: I want to get a text paragraph in a series of <li>-s and change it somewhat. Maybe make excerpt of it and add 'see more' button behind it. Now, in jQuery I would just iterate with each() and perform the tasks. With vue targeting set of DOM elements is much harder for me, probably because of whole paradigm being "the other way round".
I know I could iterate with v-for, but these elements are already in the DOM, taken from the database and templated with volt. I had even this wild idea of creating .js files from phalcon, but it would completely negate my strategy of making functional webpage first and then enhance it progressively.
Frankly speaking I feel like I'm overcomplicating for the sake of it, right now. Is vue even fit for a project like this, or is it exclusively a tool to build app from the ground up?
Vue's templating is client-side, which means if you are delivering an already templated html page (by your backend) there is little vue can still do for you. Vue needs data, not DOM elements to build its viewmodels.
This becomes pretty obvious when building a single page application for example, which would be rendered only on the client-side. You'd simply load the data asynchronously from a backend api (REST for example) and then do all the rendering on the client.
As far as I understand your usecase you want to mix client and server side rendering, rendering most of the non-interactable content using your backend's templating engine and adding some interactivity using vue. In this case you'll need to add some vue components (with their own rendering logic) to your backend template and pass data to that component using vue's data-binding.
Here's an example:
...
<div id="app">
<my-vue-list :products="{% products %}"></my-vue-list>
</div>
...
And in your JS:
var app = new Vue({
el: '#app',
data: {
components: {MyVueList} // You will have to register all the components you want to use here
}
})
Vue provides the ref attribute for registering a reference to a dom element or child component:
// accessible via this.$refs.foo
<li ref="foo">...</li>
Do note, however, that refs are not reactive, as stated in the docs:
$refs is also non-reactive, therefore you should not attempt to use it in templates for data-binding.
As the title implies, I need solid SEO and thus I need to have all the HTML loaded on my site on initial load. However, because the backend is written in PHP, and because it would be more work to write my Vue components with the server in mind, I don't want to use server-side rendering (SSR).
That leaves me with the option to send HTML over the wire, the "old school" way. What I am thinking of doing is writing each page's HTML like normal, but make one of the root html elements a Vue element in order to "upgrade" it. So the initial load downloads the finalized HTML, with all the data (tables, lists, etc already populated), but then after all the scripts are loaded, javascript can take over to make things easier and give a better UI experience. This poses a few questions, however:
Am I limited to a single component, the root? It'd be nice to still have many sub-components that would each have their own state. Perhaps inline templates can be used somehow?
Vue templates have their own templating system, like the mustache braces for displaying variables {{ myVar }}. Will I not be able to use them? The one way I can think of is to create a Vue template (that can be loaded from an external script) that is identical to the part of the HTML that it "takes over". The downside is that I'd have to maintain that component both in the original HTML and in the vue template.
Are there any good examples of what I'm trying to accomplish here?
Edit: I want to clarify that I'm aware I can put in various components here and there throughout the page. This still poses the question of how to make those components already start out rendered. Better yet would be to turn the whole page into Vue, much like an SPA.
I need solid SEO and thus I need to have all the HTML loaded on my site on initial load.
This is not entirely true. Google (80% of search traffic) easily parses SPAs now, so SSR purely for SEO isn't required anymore.
But to answer your question in general, you should check out Laracast's Vue.js series. They go in-depth on how to use PHP with Vue.js (including templating and variables).
I'd ask what it is you want to achieve with Javascript/Vue.js in your page. If everything is already rendered in PHP, does Vue provide a simple UX enhancement or takes over most of the page's heavy lifting (navigation, etc.)? If you have no reactive data and want Vue to simply be a controller for rendered components, then knock yourself out, although it might be approaching an 'overkill' scenario.
Have you looked into Prerender SPA Plugin ( https://github.com/chrisvfritz/prerender-spa-plugin )?
It is offered in the Vue documentation as a viable alternative to server side rendering ( https://v2.vuejs.org/v2/guide/ssr.html#SSR-vs-Prerendering )
Recently I've developed a multi-page application using Vue, here is how i tried to solve the SEO (Maybe this can help you ):
Htmls of header and footer (and other main common components) are packed to the page.html(eg: home.html, search.html).
Script and style are of header and footer imported in page.js(eg: home.js, search.js).
Add div.seo-zone to page.html's div#app, which includes the main SEO data(using some h1,h2,p,div and so on), and add
.seo-zone {
display: none;
}
in your css.
4. Make sure your app's root component's el is '#app'(each page's main content can be a Vue app).
Develop your app as usual.
After Vue rendered, the div.seo-zone will be replaced with your Vue components (although it can not be seen)
I'm newbie to Bootstrap 3, but I noticed that Bootstrap require Javascript even if it's not necessary, e.g. dropbown menu doesn't work if js is disabled. Is there any good reason to prefer js over CSS?
I think cause Javascript and CSS are different and can't replace each other.
In CSS you can't do for example calculations, DOM manipulation, react on click and other live events. Javascript can't style your HTML, have media queries etc. see also: Performance: Pure CSS vs jQuery
Yes, i know there are alternative for everything, see:
Can I do this in pure CSS instead of using jQuery?, Can I have an onclick effect in CSS?, etc .... but it is not the same.
What's your problem with javascript? in the first place? Do you have some requirements like: "should work with javascript disabled". Should your site work with this requirement or should it be exactly the same. What are you alternatives for javascript disabled? basic CSS? full css3? For me it seems realistic to prevent errors with javascript disabled but not expect all work the same. In the case of a dropdown you could consider a alternative navigation structure.