可能是NextJs(使用ssr-api route)打包成桌面端的最佳解决方式

ops/2024/10/20 18:46:23/

可能是NextJs(使用ssr/api route)打包成桌面端的最佳解决方式

前言

在我使用nextron(next+electron)写了一个项目后打包发现nextron等一系列桌面端框架在生产环境是不支持next的ssr也就是api route功能的这就导致我非常难受,耗费了小半个月结果告诉我只能使用NextJs的单页面模式也就是静态导出模式(因为在开发环境是支持ssr/api route的就导致我以为可以使用)这让我无法理解nextron的意义,我认为api route是NextJs作为全栈框架非常重要的功能,阉割后只能算作react plus,于是不甘心的我就开始在网上查找解决方案。

经历

>> 我在github找到了几个自称是可以在next+electron中使用ssr/api route的代码模板,但是在我不断的是错后得出这些代码模板或多或少都有问题,并不能正常打包,唯一一个让我打包成功的显示next-auth没有生效,询问作者怎么解决,作者告诉我:他不知道,这只是一个模板需要我自己去debug(流泪)。

>>为什么我不抛弃api route使用NextJs(csr)+其他后端?因为我使用了next-auth,这与我的项目不可分割,并且next-auth与api route是绑定的。再者我使用NextJs的缘由就是因为其api route能让我快速搭建全栈项目,若是阉割我还不如不用NextJs直接使用react。

>>之后我打算将NextJS的csr与ssr部分分开,在服务端部署ssr部分,桌面端打包csr部分,然后通过在网页端登录获取个人的_id,然后通过_id登录桌面端(将登录功能分割到网页端),但是依旧失败,因为next-auth要求ssr+csr绑定,如果分割只能去掉next-auth。

>>就在我准备使用下下策:将nextron中的NextJs部分提取成网页然后通过iframe(iframe真的很垃圾,是没有办法的办法)嵌套在electron中进行打包的时候它出现了:

tw93/Pake: 🤱🏻 Turn any webpage into a desktop app with Rust. 🤱🏻 利用 Rust 轻松构建轻量级多端桌面应用

Pake:一款基于Rust语言和Tauri框架的桌面应用开发框架,可以将网页内容转化为小巧玲珑的桌面应用。

它可以将任何网页直接打包成桌面端,所以我们只需要将NextJs部署然后通过Pake打包即可

省流

Pake的部署及其简单,你只需要以下几步:

  1. 安装rust

    直接去官网安装,点击exe安装时会出现选项,一直选择1即可,实在不会网上教程也很多随便找一个就行。

  2. 打开你的管理员终端输入:

    npm i -g pake-cli

    安装依赖,这边不建议使用淘宝镜像,因为我使用淘宝镜像出现了问题。

  3. 安装成功后输入:

    pake url —name yourname

    url就是你想打包的网页的网址,而yourname是你想给你应用起的名字。

成功之后会显示打包应存储的路径,找到路径打开安装即可。

最后的最后,感谢Pake!!!


http://www.ppmy.cn/ops/127055.html

相关文章

c4d哪个渲染器好用简单?c4d常用渲染器介绍

在3D设计领域,Cinema 4D(C4D)是一款功能强大的软件,被广泛应用于建模、动画和渲染。然而,C4D内置的渲染器可能无法满足所有用户的需求,因此选择一个合适的第三方渲染器变得尤为重要。 本文将为您介绍一些C…

C++中的vector介绍(常用函数)

目录 vector的介绍及使用1.vector的介绍2.vector的使用2.1vector的定义2.2 vector iterator 的使用2.3vector 空间增长问题2.4 vector 增删查改2.5 vector 迭代器失效问题。(重点) 3.动态二维数组理解4.模拟实现reserve vector的介绍及使用 1.vector的介…

开发工具(上)

前面我们在Linux部分了解文件权限,和基本指令的内容,但对于开发工具还是没有很多的接触,现在这一篇就是主要讲基础的工具;如yum,yum源,包管理器等等; Linux中的安装软件: 源码安装 …

Docker-Consul概述以及集群环境搭建

文章目录 一、Docker consul概述二、consul 部署1.consul服务器2.registrator服务器(客户端)2.consul-template(在consul服务器)3.consul 多节点 一、Docker consul概述 容器服务更新与发现:先发现再更新,…

Spring Boot技术栈的电影评论网站设计与实现

6系统测试 6.1概念和意义 测试的定义:程序测试是为了发现错误而执行程序的过程。测试(Testing)的任务与目的可以描述为: 目的:发现程序的错误; 任务:通过在计算机上执行程序,暴露程序中潜在的错误。 另一个…

vue elementui el-table实现增加行,行内编辑修改

需求&#xff1a; 前端进行新增表单时&#xff0c;同时增加表单的明细数据。明细数据部分&#xff0c;可进行行编辑。 效果图&#xff1a; <el-card><div slot"header"><span style"font-weight: bold">外来人员名单2</span><…

UE5 圆周运动、贝塞尔曲线运动、贝塞尔曲线点

圆周运动 贝塞尔曲线路径运动 蓝图函数库创建贝塞尔曲线点 // Fill out your copyright notice in the Description page of Project Settings.#pragma once#include "CoreMinimal.h" #include "Kismet/BlueprintFunctionLibrary.h" #include "MyBlu…

python-docx -- 读取word文档中的文本

文章目录 word文档案例基于python-docx读取段落基于pywin32读取段落基于pywin32读取表格 word文档案例 需求&#xff1a; 读取所有的段落文本&#xff0c;并使用字典表示每一个段落&#xff1b;段落字典格式如下&#xff1a; {"type": "text","cont…