Comments (13)
You're welcome @franco-onevillas.
If you don't want to use Vuex you can take a look at this repository https://github.com/dongnaebi/vue3-SSR-starter and try to get inspiration from the syncState
object.
from quasar-app-extension-ssg.
You can keep your Vue Router configuration as is and adapt your server to redirect from url with trailing slash to url without trailing slash.
Or you can do the opposite by adding trailing slash in your Vue Router configuration.
The important thing is to be consistent to optimize SEO by avoiding duplicate content available at two different urls, one with trailing slash, and the other without.
About Vue Router configuration the new version v4 for Vue3 had made this change "Named children routes with an empty path no longer appends a slash":
Reason: This is to make trailing slash behavior consistent: by default all routes allow a trailing slash. It can be disabled by using the strict option and manually appending (or not) a slash to the routes.
from quasar-app-extension-ssg.
Hi Franco,
It is not necessary to use preFetch
but this is a reliable way to handle async data with SSG.
In which lifecycle hook do you make the api call ?
beforeMount
and mounted
hooks are only executed at client-side so you could try to make your api call in created
hook instead.
Another way I can think of is to fetch and save your data in json files before building your application. Then you can just import the json files where you need them.
Using this way you can also take advantage of the code-splitting feature to avoid putting the json files content inside the client page bundle by loading it asynchronously on the client-side (so it could be cached separately).
from quasar-app-extension-ssg.
Hi Freddy, thank you for the answer.
I tried on beforeCreate
and created
– setup()
on composition API – because, as you said, these are the only hooks available on SSR and I wanted to avoid the use of the vuex store on the preFetch
hook but when I inspect the source code its empty.
Sounds good, I will give it a try and see how it works with the vuex store :)
Thank you again, regards
from quasar-app-extension-ssg.
@freddy38510 Wow, that's awesome, I will also give it a try.
Thanks again and I hope that this extension gets to the Quasar docs :)
from quasar-app-extension-ssg.
Hi again @freddy38510,
I ask you here to not open a new issue. Everything is working as expected except from that when I load (from scratch) any page, for example:
- /a
- /b
It redirects to: - /a/
- /b/
I realised because of the url and the lighthouse report. Is there any configuration for this? I was looking at the docs and I didn't see anything,
Thank you
from quasar-app-extension-ssg.
The redirect with trailing slash at the end of the url can come from the Vue Router or the server you're using.
Can you provide your Vue Router configuration ?
Which version of Quasar are you using ?
from quasar-app-extension-ssg.
Yes, sure:
"quasar": "^2.1.0",`
"@quasar/cli": "^1.2.1",
"@quasar/extras": "^1.11.0",
import { RouteRecordRaw } from 'vue-router';
const routes: RouteRecordRaw[] = [
// Hero layout
{
path: '/',
alias: '/home',
component: () => import('layouts/HeroLayout.vue'),
children: [
{ path: '', component: () => import('pages/Index.vue') },
{ path: 'about-us', component: () => import('src/pages/Services.vue') },
{ path: 'services', component: () => import('src/pages/Services.vue') },
],
},
// Main layout
{
path: '/',
component: () => import('layouts/MainLayout.vue'),
children: [
{
path: 'wishlist',
component: () => import('src/pages/Wishlist.vue'),
},
{
path: 'terms-and-conditions',
component: () => import('src/pages/Legal.vue'),
},
{
path: 'privacy-policy',
component: () => import('src/pages/Legal.vue'),
},
{
path: 'cookies',
component: () => import('src/pages/Legal.vue'),
},
],
},
// Search layout
{
path: '/huis-ibiza',
component: () => import('layouts/SearchLayout.vue'),
children: [
{
path: '',
component: () => import('pages/Search.vue'),
},
],
},
{
path: '/huis-ibiza',
component: () => import('layouts/MainLayout.vue'),
children: [{ path: ':slug', component: () => import('pages/House.vue') }],
},
// Always leave this as last one,
// but you can also remove it
{
path: '/:catchAll(.*)*',
component: () => import('pages/Error404.vue'),
},
];
export default routes;
from quasar-app-extension-ssg.
The redirection is coming from the express.js server provided by the command quasar ssg serve
which I assume you are using.
This is the expected behavior to have consistent Urls especially for SEO.
If you really want to have no redirection with trailing slash, you can use your own server with the appropriate configuration.
For express.js the option redirect
of express.static
middleware should be set to false
. Then you need to send the corresponding index.html file in response to each request.
app.get('*', (req, res) => {
res.sendFile(path.join(rootPath, req.url, './index.html'));
});
from quasar-app-extension-ssg.
That's nice, I didn't know that so thanks again.
And if I want to keep that behavior, should I add the "/"
on Vue Router configuration? Because I don't want the lighthouse report messing the performance.
from quasar-app-extension-ssg.
Great, i was looking at the same thing :)
btw, do you need more hands on the extension development?
Let me know!
from quasar-app-extension-ssg.
Sure,
All PR are welcome.
One feature that I think is missing a lot from this extension is a dev mode as mentioned in this issue.
from quasar-app-extension-ssg.
Hey @freddy38510 , sorry I am on vacation and I just see this message.
Great, I will check it! Another amazing feature would be Incremental static regeneration
Let me know what do you think :), I will check the other issue.
Regards,
Franco.
from quasar-app-extension-ssg.
Related Issues (20)
- Vite Failed to resolve entry for package "https" HOT 2
- Automatic patch of ES Module import HOT 2
- Cannot read properties of undefined [pinia store] HOT 1
- error when using meta HOT 1
- ssg gets fallback to SPA when router has query
- Render markdown to SSG
- Missing Vite.js v3/v4 support HOT 7
- searchForWorkspaceRoot is not a function HOT 10
- Demo is no longer can be used as a template HOT 4
- Error [ERR_REQUIRE_ESM]: require() of ES Module inside quasar-app-extension-ssg's server-entry.js HOT 2
- pinia persisted state: storages (session storage) HOT 2
- I get the error message "Cannot find module 'ouch''" when running "quasar ssg dev" on freshly scaffolded quasar project HOT 3
- vue-loader & css-loader throwing errors HOT 12
- minifyOptions error? HOT 1
- Failed to add extension due to workbox-build version HOT 2
- Cannot find module `.cache/quasar-app-extension-ssg/server/server-entry.js` HOT 2
- `TypeError: Cannot read properties of undefined (reading 'get')` in `server-entry.js` during generation HOT 7
- Using Pinia from library results in `TypeError: can't access property "_s", pinia is undefined` HOT 3
- Empty data on all pages except one, when routes uses same component HOT 1
- feat: update to Vite 5 and @quasar/app-vite dependency to ^2.0.0
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from quasar-app-extension-ssg.