 Okey, jadi akhirnya, ya, kita boleh lanjut. Jadi, ya, sekarang poh telah di atas belakang atau belakang atau mana framework yang kita gunakan. Jadi sekarang mungkin saya suka mencari jika ada sesiapa tahu apa-apa tentang rending servisite. Tidak, okey, terima kasih, terima kasih. Jangan risau, jika anda tidak tahu, saya akan menjelaskan lebih banyak tentang apa yang berlainan dengan rending servisite, aplikasi single-page dan juga perkara ini disebabkan website statis. Okey, mari kita mulakan dengan biar anda tahu apa yang akan saya lakukan hari ini. Saya akan hanya berikan sebuah penjara yang panjang, yang sangat cepat. Jadi, perlukan website, bagaimana anda melakukan perlukan yang berlainan, SPA, SSR, dan statis. Dan beberapa penjara di sisi statis dan kemudian tempat yang mudah yang anda akan melakukannya dengan mudah-mudah. Struktur dan hidup kandungan. Ini sebenarnya sangat penting apabila anda melakukan perlukan untuk kandungan. Hal-hal yang anda boleh lakuk apabila anda menggunakan generasi. Kerana ada beberapa perkara yang akan generasi. Ada sangat terutamanya kepada perkara ini yang membuat beberapa perkara dalam kandungan yang tidak perlu digunakan. Ia berlaku sangat mudah sekarang tapi anda akan melihat nanti. Kemudian perkara untuk konfigurasi generasi. Pada kedua-dua perkara yang terakhir sangat penting. Yang paling penting adalah perkara masalah yang paling penting. Kerana ia adalah perkara yang sebenarnya dapat dibuat dengan cepat dalam kandungan. Tapi apabila anda melakukkan beberapa perkara ini, anda sebenarnya mempercayai banyak masa mengenai kenapa perkara tidak berlainan. Apabila anda melakukannya, anda akan menggunakan perkara. Okey, jadi perkara yang sangat cepat. NUX adalah actually a framework for building Vue.js applications. Sangat tergantung kepada Next.js. Jadi, basically, you need to use Vue.js. You write less boilerplate and there's a lot of magic going on behind the scenes because all the routing is based on where you put the, where how you name your files and which folder you put it in. The store modules are also basically magically sort of like created when you put something inside a store folder. Okey, it's very easy to create a single page application or server-side render applications. There's a config where you just specify either SPA or universal mode. And you also have this thing called generate where it will generate the static web pages. Okey, we'll explain more on the generated websites later. So, very important about SSR and NUX generate. So, SSR, you can have dynamic content generated from the server. So, what happens is that you actually hit the server and then you can actually make use of the server-side information, the information that the server receives like the request header that comes in which contain things like probably your browser locale and so on. And then you can use it for your front-end application. For NUX generate, it's slightly different. They also generate the content but it's generated only once. In fact, there's no server or no server. Everything is all on the browser already. At least, I hope I'm correct on this. Okey, so now we come to the comparison. So, for SPS, you know, it's poor for SEOs because the content that it shows is not very English, not very understanding. It's also slow, especially if you have a bigger application it has to load everything and it takes time. Even if you minify or do a lot of magic, it's still bigger than it is. You cannot fight the law of physics. The rest is actually very good because deployment is very easy. You just throw it to a static content server. Scaling is very easy. And PWA is also quite easy to do. So, for server-side rendering, what SPA does poorly yet, server-side rendering does good at, and then vice versa. So, the problem with server-side rendering is you need a server to actually serve those pages and that requires you to have an ExpressJS or App Engine or something running and you want to scale in the cloud you have to spin up extra VMs or containers and so on. So, there's also some complexity in server-side rendering because you need to know when the thing is rendered in a server and when the thing is rendered in the client and if there's some mismatch, which I will show later, very bad things can happen to your application. And the last one that we're going to go through is the static sites. So, this one has actually a lot of positives but there's only one part that is quite bad is that if let's say you have dynamic routes like you have a slash, a username and then slash, another username, all these are dynamic because your database, the users can be different. If you directly go to a browser and type in the route plus slash that username, you will end up with a 404 error. So, this is one of the drawbacks that you may compromise or think of another way to how to do things in order to gain the benefits and not get the 404 or reduce the effect. So, the static-side nodes, again, very important, there's no server-side. It's similar to SPA. So, it's just JSHTML, CSS and you load it to the contents server. Oh, just now I've explained already. Okay, so I think I can skip this. Yes, okay, I can skip this. Okay, so for the easy part, to create this NUX app, you just use the NUX create app that's one way. All the structure is generated for you actually I would encourage to use this. But if you want, you can also use manual setup you install the NUX and then you put at this folder called pages and so on. And then you learn actually how the thing is structured. But for quick start, you can just use NUX create app because there's a lot of options that you'll get you to choose whether you want to include like Xios, whether you want to include Linting, the server, you want to serve whether it's Express Qua or so on. Okay, so after the setup, some of the useful libraries that I found that we use with NUX.js includes the Xios for you to make it call to the back end. NUX.js Apollo also it's a GraphQL client. NUX.js.nf where you can actually burn some of your config information onto the client-side. Yes. So just have to be careful that these things do not contain sensitive information like your keys. It could contain your endpoints like where you want to call your API but shouldn't put the keys inside. Okay, and then the other very good NUX IATN for internationalisation and also NUX of useful authentication. They have a very good example on local authentication as well as those callbacks O of 2 we call GitHub and then Google. So those are the quick glance on the easy part. So for this NUX what happens when you generate you get this folder structure here on the left. Okay, the assets part where you're like images you can put images and all these images inside the assets they'll actually be minified and so on. But if you do not want those things to be minified or you put it actually in the static the static folder. Okay, the store is where you actually put the Vuex store. So if it's index.js inside there is the main store and if you call it abc.js it's actually a module name you actually separate the store so that it's better organised. The store name ABCJS and you just need to create found name you don't need to do any other configuration or so on. Okay, so Pages is where you actually structure the website the routes. Middleware, yes. So middleware is actually this one where they they will call the middleware and then they'll do something before they render the pages. So which brings me to the NUX lifecycle which is a very important. So the incoming request is actually basically the HTTP request to the page and then you call this NUX server in it which will get all the information for your store. This still at the server site and then this middleware will also be called this one then followed by your pages and then oh sorry, this validate with this one. I have to read so ignore this. So async data and fetch is for you to fetch your data like from other sources before you actually render it into the page. So you can imagine this like instead of a JavaScript you run a PHP application so you go to the PHP like abc.php and PHP will go and do all the fetching on the back end and everything they will form everything up and then they will spit it out. So this is basically what it is. So it's like going regressing but actually it's not. So what you can ignore for NUX Generate because Generate only run once so some of the things are actually pretty useless like NUX server in it async data and fetch you will actually do your calls in like the created or the mounted hook as usual. Then there's no server middleware so there's this thing called server middleware inside which actually instead of running express you can have this thing inside there to do some calls or whatever server middleware that things that you need to do you don't need that because it's non-existence no SSR this tag where you you do want a block inside the no SSR to render in the server this is also useless because there's no server and basically plug-ins that that can't handle SSR because they are they use like thing like the window object which are all in the front end you don't have to worry about it already okay so the other thing you need to know is in the view life cycle only the before create and created hooks are called in both the client and the server side so the server side only the created hook and the before created are called the other hooks mounted destroy they are all on the browser side yes and then the last thing the middleware that you saw actually inside the loop actually it's also pretty useless because this thing will not be at the at the browser side you only have to use this and this one you myself put it inside the created or the mounted hook yep okay now we come to the configuration of Nux Generate so basically the important one actually okay it's a where you want to generate the file so you just specify a directory the dev tools means you can use the view dev tools with the static generator website because you put that as false and you generate you will not be able to see your like view as state in the dev tools the one on top where the routes is more important because this one you can specify the routes that you want to generate so flight for dynamic routes what happens is that this one will call API it hasn't generated yet you call API to list all the users so if you're like 1 million users and there's no limit you will generate 1 million different static HTML files and that one you have problem so this one you will be careful when you use that doesn't mean it cannot handle the dynamic routing it's just that when you key in that dynamic route directly in the browser and you press enter you get the 404 so far everything okay okay not too fast not too slow okay so now we come to problems basically there are SSR problems these are actually inherent with server side rendering so there is no window in the server so if you use something that has a window inside you can you just see some ugly screen on your browser and hydration failure is also similar I will go through it the other one is FML problems okay these are unique problems that will slow down your development like later I will show you this Vuex modules you actually can dynamically create it in a normal Vue.js and it works but when you come to the next yes and you do this it doesn't work and then you have to dig in and find out why it doesn't work so yeah sometimes it might take if you're lucky maybe a few minutes you know hours or not days and then inherent problems which sometimes you cannot fix it but thank goodness they are fixed so the first problem no window in server so what happens is that you have this sample where you add event listener click so when you visit this page anything you click something will pop up okay but what happens is that when you call the created hope in the in the okay this process client means on the browser side so actually when you're inside the server and you're rendering you try to generate this but there's no window object so when you go to the page and then you okay when you navigate to the page it will be okay but when you type on the on the finishing already oh shh okay okay when you type on the page it will just crash okay that's what we have to go to the problems these are the ones that people pulled their head out okay so the other one is a hydration failure okay so what happens is that the dorm on the client side doesn't match on the server side so you can see this dorm there's a date picker here there's a date picker here but this date picker is loaded only inside the browser okay so when you gen when the the SSR try to serve the page you will get a warning or something that this component is not it's not ya this component is not found because it's not there so you might run into problems because of this so you need to take note yes okay sorry so how do do you fix that so you can actually wrap between this thing called the no SSR tag so this no SSR tag will tell them that not to render it in the server side or you can move dorm manipulation to the mounted hook which is available inside the browser okay next one gosh okay this one is very easy so by right this store register module for Vuex store should work normally but it doesn't because the state gets wiped out I don't know why I have no answer still but what happen is that I just create back the state and then it works after that ya okay ya I was working on this problem about one day so I will ask them next time okay so the other one this problem happened before Nux 2 in that just this thing takes 3 seconds to load so imagine you have a lot of request coming in bye bye so they fix it in Nux 2 ya this one if you want to fix it you really have to dig in so the other one is that the server responds very slowly after connection so fix in Nux 2 so fortunately they have been fixed otherwise ya it will be a show stopper if you want to deploy production okay I think maybe the important thing will be the references I think all this will be available on the site will make it available and thank you everybody for the talk so this is the place that I work at ya thank you yes