I have developed a Vue app and a Laravel app and connected them with Vuex,VueRouter and the API endpoints, now I want to implement SSR. So far I have found 2 methods for implementing SSR:
use PhpV8js and Render Vue SSR in Laravel blade
use 2 separate processes: Laravel (php-fpm) and VueSSR (node)
accept the request in Laravel and render session dependent data like user info, queries on repositories in json
pass session json to node proccess (with socket or http)
node process renders Vue app with session data and passes it back to laravel
laravel renders the SSR blade with rendered Vue app
my concerns for first the method is: I don't like using PhpV8js in production environment with lots of traffic and a Vue component heavy app!
for second one: I don't know if passing html pages back and forth between socket apps is a good idea.
for a production environment which of these do you prefer? which will be the most performant? and are there other ways to accomplish Vue+Laravel SSR?
Related
I have a strange error on a project of mine.
I'm trying to switch a laravel project to something where the backend is seperated from the frontend.
Backend api stays laravel, but frontend is vue with quasar.
Since we want to do the change gradualy, i made one new feature in quasar and want to integrate it in my existing laravel-app.
In order to accomplish that, i'm using an iframe in which i load the new vue frontend.
Everything works as it should work, except for one crucial thing.
I have one id-parameter from laravel that should be passed to the iframe (the quasar/vue application), and for some reason... that's not working.
I've tried to work with route parameters
<iframe src='/spa/12'
and in vue-router
{ path: '/:id', component: () => import('pages/weekSchedule.vue') }
Without success
I've tried query parameters in the url like this
<iframe src='/spa/index.html?id=12'
I can see the correct url in my network inspector, the url is called with the query, but i can't seem to get the parameters in vue.
async mounted() {
this.id= this.$route.query.id
}
When i test it -not in iframe- everything is working.
But in iframe i get nothing.
Does anybody have an idea/solution?
Any help is appreciated!
I implemented a simple crud application in two ways.
One with Laravel and Vue and one with Laravel, Vue and Inertia.
When rendering a simple user list in my Vue/Laravel application (either with routing or initial page load), Vue renders the whole page instantly and loads the user list as soon as it receives it from the server. -> good user experience, possibility to implement a loading indication
When rendering the same thing in my inertia application, Vue renders the whole page after the data has been received from the server. Which is a very bad thing for applications with large amounts of data.
Even in my really small/slim application, I felt the difference and figured this out with a simple sleep(3) before returning the view (or Inertia::render) in my UserController.
Is this normal/is there a way to prevent this? Or did I possibly implement inertia poorly?
I'm using inertia.js 0.8.5, inertia-vue 0.5.5 and Vue 2.6.12
Normally, if you want to display lists of users with Inertia, you'd paginate the list server-side with Laravel's built-in pagination. If the page load time is slow, you're probably trying to load too much data/missing eager loads/missing DB indexing/doing some calculation that can be optimized.
You can use Progress Indicator to improve the UX when navigating between Inertia views. Does it make a difference to the user if they see an empty table in an SPA with ajax calls before the data loads vs. seeing a progress bar before the view reloads? IMO not really.
If for some reason in a particular view it's really important to have the table layout (or some other empty data container) displayed, even if it's empty for some time, you can always load the data with ajax in that one-off case. Not all data in an Inertia app needs to be "pushed" to the view from the controller, you can also "pull" it from Vue/React side.
I'm trying to understand when and how to mix the Laravel and Vue components in a web app.
MPA where each blade view consists of a Vue component
Is it ok to have server-side routing and each view to consist of a Vue component ? Or in this case it would be better to make an SPA ? ( More specifically, here the question is whether there is a benefit of having server-side routing instead of client-side routing ? )
Taking as a reference stack overflow.
When you click on a Question the page refreshes which means that a GET request is sent to the back-end and where a new html file is sent to front-end.
When you create a Question, a new file is sent from the back-end and the page again reloads.
However, the content of the Question itself, seems to be dynamic because you can edit the Question or a Reply, but then again when you save the change, the page reloads.
In this case, what is the benefit of communicating with the server with a GET/POST instead of making an AJAX call, taking into consideration that the content of the page is rendered on the client-side with JS which is not SEO-friendly ?
What are the upsides and downsides of this approach ?
I've got a component that downloads data from an API. When the user clicks Search, the content from the API is fetched via AJAX. This content from the API is in JSON and has got an ID of the product inside. I am able to create new HTML elements based on this content and put them inside my site, but I would like every created on the fly element to have routerLink="/detailsPage/itemID" working, so that after clicking it would route to detailsPage with apropriate ID. How to do it in the most simple way? I assume some recompiling of refreshing is needed.
The answer to this question is HTTPClient - Angular offers it as an easier way to use XMLHttpRequest (AJAX) in Angular applications, and using it also makes sure that routerLink or any other Angular directives will work on objects created dynamically with this method.
Angular - HTTPClient
I want to implement react js to different pages of my website,
e.g
in home page, registration, login, etc.
all tutorial i have seen it only uses 1 app.js how can i achieve this
to multi page app.
P.S i am using laravel elixir and i combine them into 1 main.js.
Add a mounting point in the pages that you want your React App to be mounted.
e.g.
// main.js
ReactDOM.render(<App props={/* props from somewhere */}/>, document.getElementById('mountingPoint') );
// rendered HTML from pages should have
<div id="mountingPoint"></div>
I found this https://github.com/christianalfoni/react-webpack-cookbook/wiki/Multiple-entry-points
I think this is more appropriate on what i need and then i will just map the file
name in my laravel app.
this way i dont need to load the js code for contact_us.php to login.php
You could also use something like React Habitat to make this architecture easier.
With it, you could just define a container of your components so they resolve in your DOM.
For example, in your javascript you would do
import MyComponent from './Components/MyComponent';
...
container.register(MyComponent).as(myComponent);
Then in any of your HTML pages
<div data-component="myComponent"></div>
It also supports multiple containers and async code splitting.