fresh是什么意思（Fresh为什么这么火）

　　大家好，我是Echa哥。今天给大家介绍一个新的框架Fresh，由Deno作者出品，在最近发布了1。0的正式版本，宣布支持了生产环境，并且在Github上热度也比较高，现在是时候给大家详细地介绍一下这个方案了。接下来会从框架定位、上手体验、优劣势评估和源码实现这几个方面来给大家深入解读Fresh框架。
　　首先，从定位上来看，Fresh属于Web全栈开发框架。是不是对于这个词非常眼熟呢？相信你已经想到了，像现在大名鼎鼎的Next。js以及新出的Remix都是走的这个路线。那么作为Next。js和Remix的竞品，Fresh有哪些值得一提的亮点，或者说有哪些差异点呢？主要包括如下的几个方面：
　　首先，Fresh基于Deno运行时，由Deno原班人马开发，享有Deno一系列工具链和生态的优势，比如内置的测试工具、支持httpimport等等。
　　其次是渲染性能方面，Fresh整体采用IslandsSSR架构（之前介绍的Astro也是类似），实现了客户端按需Hydration，有一定的渲染性能优势。
　　当然，还有一个比较出色的点是构建层做到了Bundleless，即应用代码不需要打包即可直接部署上线，后文会介绍这部分的具体实现。
　　最后，不同于Next。js和Remix，Fresh的前端渲染层由Preact完成，包括Islands架构的实现也是基于Preact，且不支持其它前端框架。
　　上手体验
　　在使用Fresh之前，需要在机器上先安装Deno：
　　如何没有安装的话可以先去Deno官方安装一下：https：deno。land。
　　接下来可以输入如下的命令初始化项目：
　　denorunArhttps：fresh。deno。devmyproject
　　项目的工程化脚本在deno。json文件中：
　　｛tasks：｛A表示允许Deno读取环境变量start：denorunAwatchstatic，routesdev。ts｝，importMap：。importmap。json｝
　　接下来你可以执行denotaskstart命令启动项目：
　　终端里面显示Fresh从文件目录中扫描出了3个路由和1个island组件，我们可以来观察一下项目的目录结构：
　　。
　　README。mdcomponentsButton。tsxdeno。jsondev。tsfresh。gen。tsimportmap。jsonislandsCounter。tsxmain。tsroutes〔name〕。tsxapijoke。tsindex。tsxstaticfavicon。icologo。svgutilstwind。ts
　　你可以关注routes和islands两个目录，〔name〕。tsx、apijoke。ts和index。tsx分别对应三个路由，而islands目录下的每个文件则对应一个island组件。
　　而开发者并不需要手写路由文件，Fresh可以自动地生成服务端的路由到文件的映射关系。很明显Fresh实现了约定式路由的功能，跟Next。js类似。
　　每个island组件需要有一个default导出，用来将组件暴露出去，使用比较简单，就不展开介绍了。而路由组件则更加灵活，既可以作为一个API服务，也可以作为一个组件进行渲染。接下来，我们以脚手架项目的几个文件示例来分析一下。
　　首先是apijoke。ts文件，这个文件的作用是提供服务端的数据接口，并不承载任何的前端渲染逻辑，你只需要在这个文件里面编写一个handler函数即可，如下代码所示：
　　apijoke。tsimport｛HandlerContext｝fromfreshserver。constJOKES〔省略具体内容〕；exportconsthandler（req：Request，ctx：HandlerContext）：Response｛随机返回一个joke字符串returnnewResponse（body）；
　　｝；
　　当你访问apijoke路由时，可以拿到handler返回的数据：
　　接下来是index。tsx和〔name〕。tsx两个文件，第一个文件对应根路由即，访问效果如下：
　　后者则为动态路由，可以拿到路由传参进行渲染：
　　exportdefaultfunctionGreet（props：PageProps）｛return
　　Hello｛props。params。name｝